Chart.js多个数据集

时间:2019-01-15 01:20:37

标签: javascript php chart.js

我的具有多个数据集的chart.js出现问题。我有四(4)个数据集。问题在于数据不断分离。

数据集是:rekorida,商品,贸易支票等,这些数据集应该在一个日期内。如何将四个数据集合并为1个日期?

这是json结果

0:{Rekorida:2,日期:“ 2019年1月”}
1:{商品销售:1,日期:“ 2019年1月”}
2:{TradeCheck:1,日期:“ 2019年1月”}
3:{Others:1,Date:“ January 2019”}

截屏: enter image description here

    var dates = [];
    var rekorida = [];
    var merchandizing = [];
    var tradecheck = [];
    var others = [];

    for (var i in data){
         dates.push(data[i].Date);
         rekorida.push(data[i].Rekorida);
         merchandizing.push(data[i].Merchandizing);
         tradecheck.push(data[i].TradeCheck);
         others.push(data[i].Others);
    }

    var rekoridaData = {
         label: 'Rekorida',
         data: rekorida,
         backgroundColor: 'rgba(0, 99, 132, 0.6)',
         borderWidth: 0,
         yAxisID: "y-axis-1"
    };

    var merchandizingData = {
         label: 'Merchandizing',
         data: merchandizing,
         backgroundColor: 'rgba(99, 132, 0, 0.6)',
         borderWidth: 0,
         yAxisID: "y-axis-1"
    };

    var tradecheckData = {
         label: 'Trade Check',
         data: tradecheck,
         backgroundColor: 'rgba(99, 132, 0, 0.6)',
         borderWidth: 0,
         yAxisID: "y-axis-1"
     };

     var othersData = {
         label: 'Others',
         data: others,
         backgroundColor: 'rgba(99, 132, 0, 0.6)',
         borderWidth: 0,
          yAxisID: "y-axis-1"
      };

      var dateData = {
         labels: dates,
         datasets: [rekoridaData, merchandizingData, tradecheckData, othersData]
      };

      var chartOptions = {
          scales: {
             xAxes: [{
                 barPercentage: 1,
                 categoryPercentage: 0.6
             }],
             yAxes: [{
                  id: "y-axis-1"
             }]
           }
       };

       var ctx = document.getElementById("activities-chart").getContext('2d');
       Chart.defaults.global.defaultFontFamily = 'Montserrat';
       Chart.defaults.global.defaultFontSize = 10;
       var chart = new Chart(ctx,{
            type: charttype,
            data: dateData,
            options: chartOptions
         });

0 个答案:

没有答案