Bootstrop统计图表插件Chart.js的介绍以及简单使用方式
在项目中关于数据方面难免要生成报表,曲线图,柱状图,蛛网图等一些图表以便于观察数据走势,在做相应网站的时候肯定会用到,学习记录!
- 准备
- Chart.js或者是Chart.bundle.js
- 如果考虑浏览器兼容还需下载
- excanvas.js
- 下载地址
- https://github.com/nnnick/Chart.js
- chart.js中文文档
- http://www.bootcss.com/p/chart.js/docs/
曲线图(Line Chart)
要看一系列数据的走势我们就要采用曲线图,能一目了然看见数据的趋势变化。
首先
引入图表的js文件
<script src="Chart.js"></script>
或者是
<script src="Chart.bundle.js"></script>
有需要的引入jquery的js文件或者是兼容浏览器的js文件
<script src="jquery.min.js"></script>
<script src="excanvas.js"></script>
图表区域
设置图表放置区域
我们可以把图表的canvas放在一个Div区域里面,当然位置可以自己设置任意放置
<div>
<canvas id="canvas"></canvas>
</div>
实例化Chart对象
对象的实例化的脚本要写在canvas画布的后面,否则可能会包js错误。
<script>
//图表的结构配置
var config = {
type: 'line',//图标类型,如网状图是radar
data: {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],//X轴显示的标签
datasets: [{//数据格式 多少人每个人什么标签 图例 样式是什么json格式
label: "张三年度业绩表",//图例 每个人的曲线名字
backgroundColor: window.chartColors.red,//代表这个人的数据夜色
borderColor: window.chartColors.red,
data: [
20,30,60,64,65,70,76//这个人的业绩情况,也就是表格数据
],
fill: false,//是否填充 是否用背景色填充表格
}, {//第二个数据 更多人数据也可以这样填充
label: "李四年度业绩表",
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
60,34,56,28,12,32,53
],
}]
},
options: {//表格样式
responsive: true,//是否自适应
title:{
display:true,//是否展示标题
text:'业绩表'//图表标题
},
tooltips: {//工具提示
mode: 'index',
intersect: false,
},
hover: {//鼠标悬停的时候的数据展示
mode: 'nearest',
intersect: true
},
scales: {//刻度设置
xAxes: [{//X轴设置
display: true,//是否显示
scaleLabel: {//刻度标签
display: true,
labelString: '月份'//标签名字
}
}],
yAxes: [{//y轴标签
gridLines: {//网格线
drawBorder: false//画边框,
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']//颜色
},
display: true,
scaleLabel: {//同上
display: true,
labelString: '业绩量'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
</script>
图表样式
网格表
表格样式不同就是表格的设置不同而已其他都是差不多的
网格表的设置
代码一样的只是把类别修改了一下
var configwan = {
type: 'radar',
data: {
labels: ["吃饭", "喝水", "睡觉", "敲代码", "玩游戏", "骑单车", "跑步"],
datasets: [{
label: "李四的生活网格表",
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: [3, 1, 8, 5, 3, 1, 4]
}, {
label: "张三的生活网格表",
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: [5, 1, 5, 5, 6, 2, 0]
},]
},
options: {
legend: {
position: 'top',//图例的位置
},
title: {
display: true,
text: '网格表'//标题
},
scale: {//刻度从零开始
ticks: {
beginAtZero: true
}
}
}
};
//实例化对象
window.onload = function() {
//不要忘记给这个画布一个id
var ctx = document.getElementById("canvas").getContext("2d");
window.myRadar = new Chart(document.getElementById("wan"), configwan);
其他图表
图表样式应用其实都差不多,只是各种配置不同而已,想做出自己想要的样式,自己看api自己慢慢修改就好了,Chart.js就介绍到这里了。
浏览器兼容
- 可能对一些低版本的浏览器不兼容。建议大家使用较新版本的Chrome。
- 可以采用excanvas.js兼容一些浏览器。