chartjs生成数据统计报表

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

以柱状图bar为例

1.后台的数据查询准备

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

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

例如我用的mybatis

select返回resultMap 如下

<resultMap id="chartByCity" type="java.util.Map">
<result column="city_name" property="cityName" jdbcType="VARCHAR"/>
<result column="count" property="count" jdbcType="VARCHAR"/>
</resultMap>

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

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

<canvas id="myChart" width="100%" height="50%" style=""></canvas>

可以通过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,
}],
}
},
});

转载于:https://www.cnblogs.com/brian-csyy/p/7640897.html