chart.js使用用法

下面的链接是不同的图的实例,请先看本文了解大概,再看不同的统计图的实现

• 使用chart.js画折线图
• 甜甜圈图和饼状图

chart.js使用用法

定义画布

<canvas id="myChart"></canvas> <!--必须是canvas ,给好Id-->

创建图表

var ctx = document.getElementById('myChart').getContext('2d');//2d表示图表是2d的

给定数据

var myBarChart = new Chart(ctx, {
    type: '',
    data: {},
    options: 
});

解释：chart(参数一,参数二)

参数一：创建的图表变量；参数二：数据集

数据集参数：

​ type:图表类型 bar-柱状图，line-折线图，radar-雷达图。。。等等

​ data:数据结构

​ options:图表样式设置，默认为default

data 数据结构参数

​

{
    labels: ,//柱状图的每个列下面的名称标识 比如：第一列：'电脑'（表示第一列是电脑的图）
    datasets: [{
    label: ,//鼠标指向某个柱时，柱上面显示的标签 比如：'出库'（指着电脑列时会显示这列表示 出库）
      data: ,//柱子表示的数据 比如:50 也可以是数组[50,60,7,8,109]
    backgroundColor: ,//柱子背景色
    borderColor: ,//柱子边框色
    borderWidth://柱子框的粗细
    },{
    label: ,
    data: ,
    backgroundColor: ,
    borderColor: ,
    borderWidth
}]
}

上面的datasets:[{},{}]里面一个花括号表示一列有一个柱子，两个表示两列有两个柱子 一次类推（每个柱子数据和颜色和标签就再花括号里写）

options:图表样式设置

​ 按需设置 详细参数可在

chart.js官方文档

里面查看

动态添加/删除/修改数据

我们的报表应该用不到删除和修改，直接从数据库拿数据再添加就行了

网上有add和update函数，但是和becool自己包含的char.min.js有文档冲突，凡是函数都用不了，可能要自己去定义，有兴趣可以自己网上看

这里推荐使用这个方法：

先把数据库的数据放到一个数组/结果集（可以是结构体数组）里

然后Js拿到底层的结果集后在循环把这个结果集的想要的属性分别放在不同的数组里，这样在上面的data参数里就可以放置不同的数据数组，这样就可以实现一个列里可以有多个柱子 也就是一个数组数据对应一个柱子

改进

按上述方法画表后，如果不刷新页面，多次画表（也就是查询多次报表）后，每次的表都会存在这个页面里，

当鼠标移动的时候就会发现canvas块的位置会有多个柱状图在闪动

所以可以在每次画表前先清除上次的图表，然后重新创建：

  $('#myChart').remove(); // this is my <canvas> element
        $('#myChartParent').append('<canvas id="myChart" height="230"></canvas>');

可以看看我myChart.js的具体写法 里面的options就用得比较简单

options的参数有很多，可以实现动画效果，具体更多参数还是在上面的链接里看吧

上面的都是柱状图的画法，其他图的参数有没有变化还是看链接里的官方文档吧 但大致都是一样的

例子

html代码

<div class="bar-chart" style="width:500px !important;height:400px!important;float:left;posttion:relative">
		<h5 class="bar-title">XXX当前周订单量一览表</h5>
		<canvas id="orderChart" width="400" height="400"></canvas>
	</div>
	<div class="bar-chart" style="width:500px !important;height:400px!important;float:left;posttion:relative">
		<h5 class="bar-title">XXX订单分类总量一览表</h5>
		<canvas id="orderTypeChart" width="400" height="400"></canvas>
	</div>

js代码

$(function(){
		
		var an1 = JSON.parse($("#an1").val());
		var an2 = JSON.parse($("#an2").val());
		var datas1=[];var datas2=[];
		var labels=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		
		for(var num=0;num<an1.length;num++){
			datas1.push(an1[num]);
		}
		for(var num=0;num<an2.length;num++){
			datas2.push(an2[num]);
		}
		var ctx =document.getElementById("orderChart").getContext("2d");
			data = {
				datasets: [{
							label:"已服务订单量",
							data: datas1,
							backgroundColor:"#FF6666"
						},
						{
							label:"未服务订单量",
							data: datas2,
							backgroundColor:"#C8C8C8"
						}
						],
				labels: labels
				};
		var options = {
			responsive:true,
			maintainAspectRatio:false
		};
		//var orderChart =new Chart(ctx).Bar(data, options);
		var orderChart = new Chart(ctx,{
			type: 'bar',
			data: data,
			options:options
		});
		//所有订单柱状图
		var anAll = JSON.parse($("#anAll").val());
		var dataAll=[];
		var labels2=["零申报","做账及报税","线下业务","公司账务初始化"];
		for(var num=0;num<anAll.length;num++){
			dataAll.push(anAll[num]);
		}
		var ctx2 =document.getElementById("orderTypeChart").getContext("2d");
			data2 = {
				datasets: [{
							label:"订单发生总量",
							data: dataAll,
							backgroundColor:"#66FFFF"
						}
						],
				labels: labels2
				};
		var options2 = {
			responsive:true,
			maintainAspectRatio:false
		};
		var orderTypeChart = new Chart(ctx2,{
			type: 'bar',
			data: data2,
			options:options2
		});
		
});