chart.js mysql_chartjs生成数据统计报表

参考自http://www.chartjs.org

以柱状图bar为例

1.后台的数据查询准备

以mysql为例先用group by 和limit 从数据库里查出top5，例如查出每个城市的客户数量

返回一个元素为Map的List集合。

例如我用的mybatis

select返回resultMap 如下

2.前端的数据接收和处理

在html中加一个显示图表的容器

可以通过ajax json获取数据

例如在前端对返回的数据可以这样做处理

var countData = new Array();

var itemData = new Array();

$.each(data,function(i,o){

countData[i] = o.count;//客户的数量

itemData[i] = o.cityName;//城市

})

var ctx = $("#myChart").get(0).getContext("2d");

var barChartData = {

labels: itemData,

datasets: [{

label: '客户人数',

backgroundColor: "rgba(0,128,255,1)",

borderColor: "rgba(25,36,220,1)",

borderWidth: 1,

data: countData

}]

};

new Chart(ctx, {

type: 'bar',//图表的类型

data: barChartData,//准备的数据

options: {//配置选项

scales: {

xAxes: [{

stacked: true

}],

yAxes: [{

stacked: true,

}],

}

},

});