[英]Plot a multi-line graph from grouped JSON object using Charts.js
我对一个JSON对象进行了分组,现在我试图从每个潜在客户源绘制多线图以在一个主图上进行比较。 预先感谢您提供任何有用的建议。
分组https://codepen.io/edwardgnt/post/json-object后链接到JSON对象
var ctx = document.getElementById('leads_source_canvas').getContext('2d');
var dataset = {
type: 'line',
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: 'http://admin/chart/leads_source_chart',
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);
我目前拥有的代码来自未分组的json对象。
这是解决方案。
var ctx = document.getElementById('myChart').getContext('2d'); var dataset = { type: 'line', data: { labels: [], datasets: [] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } } function getRandomRgb() { var num = Math.round(0xffffff * Math.random()); var r = num >> 16; var g = num >> 8 & 255; var b = num & 255; return 'rgb(' + r + ', ' + g + ', ' + b + ')'; } var getData = function(chartdata) { $.ajax({ url: 'https://api.myjson.com/bins/qw7np', //url:'https://api.myjson.com/bins/fadwx', success: function(data) { console.log(data); var dates = []; Object.keys(data).forEach((k, i) => { var obj = {}; obj['label'] = k; obj['fill'] = false; obj['data'] = []; obj['borderColor'] = getRandomRgb(); chartdata.data.datasets.push(obj); data[k].forEach(el => { dates.push(el.CreatedDate); }); }); dates = [...new Set(dates)].sort(); chartdata.data.labels = dates; Object.keys(data).forEach((k, i) => { dates.forEach(d => { var mark = true; data[k].forEach(el => { if (el.CreatedDate === d) { mark = false; chartdata.data.datasets[i].data.push(el .NumLeads); } }); if (mark) chartdata.data.datasets[i].data.push(0); }); }); console.log(chartdata); 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="200" height="200"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.