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

时间:2018-08-10 09:50:18

标签: javascript sql chart.js

我有以下SQL查询:

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

我想在分组的条形图中将日期的相同实例分组(例如,如果datetime是3行的20180730 060000,则chart.js将根据与datetime相关的名称显示分组的条形)。

我们当前正在将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"}]

Sample chart

0 个答案:

没有答案
相关问题