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,
}],
}
},
});