时间戳

首页 > 解决方案 > 如何在折线图js中显示多个数据集

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

问题描述

我正在使用折线图.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 请给我建议。谢谢你。

标签： phpchart.js

解决方案

假设您的数据是 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>

推荐阅读