如何在折线图中显示多个数据集 js.

Question

我正在使用折线图.js
我想显示我的折线图有两条线(实际上是动态数据集( 底部带有位置和标签的基数将以月为基数。 现在我的图表只显示最后一个数据集。

我的数据看起来像这样

{
location: "Apartment A", 
color: "#b168ac",
set_data: [{
month: 1,
value: 3500
},{
month: 2,
value: 2700
},{
month: 3,
value: 1500
}]
},
{
location: "Apartment B", 
color: "#b168aa",
set_data: [{
month: 1,
value: 1700
},{
month: 2,
value: 2800
},{
month: 3,
value: 3200
}]
}

我做了我的代码，如下所示：

var obj = JSON.parse(data);
$.each(obj,function(i,item){
var locate = [];
var amt = [];
var color = [];
var item_set = [];
locate.push(item.location);
var m = [];
var val = [];
var item_s =  item.set_data;
$.each(item_s,function(i2,item2){
val.push(item2.value);
m.push(item2.month);
var chartdata = {
labels: m,
datasets : [{
label:locate,
data: val,
backgroundColor: item.color,
borderWidth: 1,
fill: false,
}]
};
var ctx = document.getElementById("graph_by_usage").getContext('2d');
var LineChart = new Chart(ctx,{
type : 'line',
data : chartdata,
options: {
responsive:true
}
});
});
});

数据应如下所示 https://codepen.io/k3no/pen/pbYGVa 请指教我。谢谢。

Answer 1

假设您的数据是 JSON 数组，您可以按如下方式生成标签和数据集：

const labels = baseData[0].set_data.map(v => v.month);
const dataSets = [];
baseData.forEach(o => dataSets.push({
label: o.location,
data: o.set_data.map(v => v.value),
borderColor: o.color,
borderWidth: 1,
fill: false
})
);

请查看下面的可运行代码示例。

const baseData = [{
location: "Apartment A",
color: "red",
set_data: [
{ month: 1, value: 3500 }, 
{ month: 2, value: 2700 }, 
{ month: 3, value: 1500 }
]
},
{
location: "Apartment B",
color: "blue",
set_data: [
{ month: 1, value: 1700 }, 
{ month: 2, value: 2800 }, 
{ month: 3, value: 3200 }
]
}
];
const labels = baseData[0].set_data.map(v => v.month);
const dataSets = [];
baseData.forEach(o => dataSets.push({
label: o.location,
data: o.set_data.map(v => v.value),
borderColor: o.color,
borderWidth: 1,
fill: false
})
);
new Chart('graph_by_usage', {
	type : 'line',
	data: {
labels: labels,
datasets: dataSets
},
options: {
	  responsive:true
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="graph_by_usage" height="90"></canvas>