javascript - 在分组条形图中对字段的相同实例进行分组 - CHART.JS

Question

我有以下 SQL 查询：

select datetime,name,amount
from users
where datetime in ('20180730 060000','20180731 060000','20180801 060000')
group by datetime, name
order by datetime

我想在分组条形图中对相同的日期实例进行分组（例如，如果日期时间为 20180730 060000 3 行，chart.js 将根据与日期时间相关的名称显示分组条）。

我们目前将 SQL 值存储在 JSON 数组中。Javascript 文件包含以下内容：

$(document).ready(function(){
$.ajax({
             url:***,
             method: "GET",
             dataType: 'json',
             cache: false,
             success: function(data) {
                 console.log(data);
                 var DATETIME= [];
                 console.log(DATETIME);
                 var AMOUNT= [];

                 for(var i in data){
                     DATETIME.push(" " + data[i].DATETIME);
                     AMOUNT.push(data[i].AMOUNT);
                 }

                 var chartdata = {
                     labels: DATETIME,
                     datasets: [{   
                         label : '',
                         backgroundColor: 'rgba(0, 0, 255, 0.3)',
                         borderColor: 'rgba(200, 200, 200, 0.75)',
                         hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                         hoverBorderColor: 'rgba(200, 200, 200, 1)',
                         data: AMOUNT
                     }]
                 };
                 var ctx = $("#mycanvas");

                 var barGraph = new Chart(ctx, {
                     type: 'bar',
                     data: chartdata
                     });
             },
             error:  function(data){
                 console.log(data);
             }
    });
});

这是数组的输出：

[{"DATETIME":"20180730 060000","NAME":"JOE","AMOUNT":"5132"},
{"DATETIME":"20180730 060000","NAME":"ALAN","AMOUNT":"4603"},
{"DATETIME":"20180730 060000","NAME":"MARK","AMOUNT":"21391"},
{"DATETIME":"20180731 060000","NAME":"JOE","AMOUNT":"6492"},
{"DATETIME":"20180731 060000","NAME":"ALAN","AMOUNT":"8014"},
{"DATETIME":"20180731 060000","NAME":"MARK","AMOUNT":"27829"},
{"DATETIME":"20180801 060000","NAME":"JOE","AMOUNT":"6821"},
{"DATETIME":"20180801 060000","NAME":"ALAN","AMOUNT":"6938"},
{"DATETIME":"20180801 060000","NAME":"MARK","AMOUNT":"11961"}]

示例图表

标签： javascriptsqlchart.js