使用Charts.js从分组的JSON对象绘制多线图 [英] Plot a multi-line graph from grouped JSON object using Charts.js
本文介绍了使用Charts.js从分组的JSON对象绘制多线图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对JSON对象进行了分组,现在我试图从每个潜在客户源绘制多线图,以便在一个主图上进行比较.预先感谢您提供任何有用的建议.
I grouped a JSON object and now I'm trying to plot a multi-line graph from each lead source to compare on one main graph. Thank you in advance for any helpful suggestions.
分组 https://codepen.io/edwardgnt/post/json后链接到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对象.
Code I currently have is from a non grouped json object.
推荐答案
这是解决方案.
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>
这篇关于使用Charts.js从分组的JSON对象绘制多线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文