如何将对象绘制到charts.js
在过去，我在数组中绘制了json对象，但我想知道如何在数组中绘制这些对象数组。我想我写的是对的，或者它可能是在打我的脸。尝试使用charts.js进行绘图提前感谢您提供任何有用的建议。
对象示例：
{“社交媒体出站”：{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-06-21"，"NumLeads"："4“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-07-26"，"NumLeads"："26”}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-07-27"，"NumLeads"："28“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-07-28"，"NumLeads"："36”}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-07-29"，"NumLeads"："27“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-07-30"，"NumLeads"："29”}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-07-31"，"NumLeads"："21“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-08-01"，"NumLeads"："38”}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-08-02"，"NumLeads"："26“}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-08-03"，"NumLeads"："27“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-08-04"，"NumLeads"："19”}，{ "LeadSource"：“社交媒体出站”，"CreatedDate"："2019-08-05"，"NumLeads"："24“}，{ "LeadSource"：”社交媒体出站“，"CreatedDate"："2019-08-06"，"NumLeads"："17”}
回答 1
Stack Overflow用户
发布于 2019-08-07 16:02:56
你可以像这样构建一个条形图。我导出您的JSON数据here，并发出一个ajax请求来获取数据并在图表中使用它。
var ctx = document.getElementById('myChart').getContext('2d');
var dataset = {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'SOCIAL MEDIA OUTBOUND',
backgroundColor: 'rgba(0, 149, 255, 0.70)',
borderColor: 'rgba(0, 149, 255, 0.75)',
hoverBackgroundColor: 'rgba(0, 149, 255, 1)',
hoverBorderColor: 'rgba(0, 149, 255, 1)',
data: []
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var getData = function(chartdata) {
$.ajax({
url: 'https://api.myjson.com/bins/fadwx',
success: function(data) {
//console.log(data);
data.forEach((el, i) => {
chartdata.data.labels.push(el.CreatedDate);
chartdata.data.datasets[0].data.push(el.NumLeads);
});
var myChart = new Chart(ctx, chartdata);
}
});
};
getData(dataset);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
https://stackoverflow.com/questions/57385294
复制相似问题
腾讯云开发者
