Chart.js 轻量级HTML5图表绘制工具库（知识整理）
程序员文章站
2023-10-26 20:13:46
chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于html5 canvas技术，chart....
chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于html5 canvas技术，chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k）。值得推荐学习！
github源码： https://github.com/nnnick/chart.js
chart.js文档：
步骤：
html部分：
<canvas id="mychart" width="400" height="400"></canvas>
javascript部分：
- 引入chart.js文件；
- 创建图表：实例化chart对象（获取dom节点取得2d context环境后实例化）；
- 实例化chart对象后就继续创建具体类型的图表了；
曲线图（line chart）：
html:
<canvas id="mychart" width="600" height="400"></canvas>
javascript:(引入及两种使用方式)
<script src="js/chart.min.js"></script>
<script type="text/javascript">
//方式一：
var ctx = document.getelementbyid("mychart").getcontext("2d");;
var mynewchart = new chart(ctx).line(data); //这种方式是只加载数据集，（缺省options）不修改默认参数（简称法一）
//数据结构（数据参数设置）
var data = {
//折线图需要为每个数据点设置一标签。这是显示在x轴上。
labels: ["january", "february", "march", "april", "may", "june", "july"],
//数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
datasets: [{
fillcolor: "rgba(220,220,220,0.5)", //背景填充色
strokecolor: "rgba(220,220,220,1)", //路径颜色
pointcolor: "rgba(220,220,220,1)", //数据点颜色
pointstrokecolor: "#fff", //数据点边框颜色
data: [10, 59, 90, 81, 56, 55, 40] //对象数据
}, {
fillcolor: "rgba(151,187,205,0.5)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
</script>
数据结构：
//数据结构（数据参数设置）
var data = {
//折线图需要为每个数据点设置一标签。这是显示在x轴上。
labels: ["january", "february", "march", "april", "may", "june", "july"],
//数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
datasets: [{
fillcolor: "rgba(220,220,220,0.5)", //背景填充色
strokecolor: "rgba(220,220,220,1)", //路径颜色
pointcolor: "rgba(220,220,220,1)", //数据点颜色
pointstrokecolor: "#fff", //数据点边框颜色
data: [10, 59, 90, 81, 56, 55, 40] //对象数据
}, {
fillcolor: "rgba(151,187,205,0.5)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
图标参数：
line.defaults = {
//网格线是否在数据线的上面
scaleoverlay : false,
//是否用硬编码重写y轴网格线
scaleoverride : false,
//** required if scaleoverride is true **
//y轴刻度的个数
scalesteps : null,
//y轴每个刻度的宽度
scalestepwidth : 20,
// y 轴的起始值
scalestartvalue : null,
// y/x轴的颜色
scalelinecolor: "rgba(0,0,0,.1)",
// x,y轴的宽度
scalelinewidth: 1,
// 刻度是否显示标签, 即y轴上是否显示文字
scaleshowlabels: true,
// y轴上的刻度,即文字
scalelabel: "<%=value%>",
// 字体
scalefontfamily: "'arial'",
// 文字大小
scalefontsize: 16,
// 文字样式
scalefontstyle: "normal",
// 文字颜色
scalefontcolor: "#666",
// 是否显示网格
scaleshowgridlines: true,
// 网格颜色
scalegridlinecolor: "rgba(0,0,0,.05)",
// 网格宽度
scalegridlinewidth:2,
// 是否使用贝塞尔曲线? 即:线条是否弯曲
beziercurve: true,
// 是否显示点数
pointdot: true,
// 圆点的大小
pointdotradius:5,
// 圆点的笔触宽度, 即:圆点外层白色大小
pointdotstrokewidth: 2,
// 数据集行程(连线路径)
datasetstroke: true,
// 线条的宽度, 即:数据集
datasetstrokewidth: 2,
// 是否填充数据集
datasetfill: true,
// 是否执行动画
animation: true,
// 动画的时间
animationsteps: 60,
// 动画的特效
animationeasing: "easeoutquart",
// 动画完成时的执行函数
/*onanimationcomplete: null*/
}
（表示刚接触chart.js，看到这图表参数整个人都懵了，还全程英文注释，呵呵~）
理解完图表参数后，就可以自定义图表参数啦，下面来看看具体事例用法：
html部分和js文件引入部分省略：（之后的图表类型也同样省略!）
<script type="text/javascript">
//同样数据参数设置
var data = {
//折线图需要为每个数据点设置一标签。这是显示在x轴上。
labels: ["january", "february", "march", "april", "may", "june", "july"],
//这边的thisid分别对应labels的id
thisids : [12,22,50,44,99,3,67],
//数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
datasets: [{
fillcolor: "rgba(220,220,220,0.5)", //背景填充色
strokecolor: "rgba(220,220,220,1)", //路径颜色
pointcolor: "rgba(220,220,220,1)", //数据点颜色
pointstrokecolor: "#fff", //数据点边框颜色
data: [10, 59, 90, 81, 56, 55, 40] //对象数据
}, {
fillcolor: "rgba(151,187,205,0.5)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
window.onload = function() {
var ctx = document.getelementbyid("mychart").getcontext("2d");;
//方式二：传入对象字面量去修改默认图标参数，自定义图表
var mynewchart = new chart(ctx).line(data, {
// 网格颜色
scalegridlinecolor: "rgba(255,0,0,1)",
// y/x轴的颜色
scalelinecolor: "rgba(0,0,0,.1)",
// 文字大小
scalefontsize: 16,
// 文字颜色
scalefontcolor: "#666",
// 网格颜色
scalegridlinecolor: "rgba(0,0,0,.05)",
// 是否使用贝塞尔曲线? 即:线条是否弯曲
// 是否执行动画
animation: true,
// 动画的时间
animationsteps: 60,
// 动画完成时的执行函数
onanimationcomplete: function(){
console.log("给x轴的lable对应的id：");
console.log(data.thisids);
}
});
}
</script>
效果图：
柱状图：
new chart(ctx).bar(data,options);//简记，options可缺省
数据结构：
var data = {
labels : ["january","february","march","april","may","june","july"],
datasets : [
{
fillcolor : "rgba(220,220,220,0.5)",
strokecolor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillcolor : "rgba(151,187,205,0.5)",
strokecolor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}
图标参数：
bar.defaults = {
//网格线是否在数据线的上面
scaleoverlay : false,
//是否用硬编码重写y轴网格线
scaleoverride : false,
//** required if scaleoverride is true **
//y轴刻度的个数
scalesteps : null,
//y轴每个刻度的宽度
scalestepwidth : null,
//y轴起始值
scalestartvalue: null,
// y/x轴的颜色
scalelinecolor: "rgba(0,0,0,.1)",
// x,y轴的宽度
scalelinewidth: 1,
// 刻度是否显示标签, 即y轴上是否显示文字
scaleshowlabels: false,
// y轴上的刻度,即文字
scalelabel: "<%=value%>",
// 字体
scalefontfamily: "'arial'",
// 文字大小
scalefontsize: 12,
// 文字样式
scalefontstyle: "normal",
// 文字颜色
scalefontcolor: "#666",
// 是否显示网格
scaleshowgridlines: true,
// 网格颜色
scalegridlinecolor: "rgba(0,0,0,.05)",
// 网格宽度
scalegridlinewidth: 1,
//bar chart图表特定参数：
//是否绘制柱状条的边框
barshowstroke : true,
//柱状条边框的宽度
barstrokewidth : 2,
//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
barvaluespacing :5,
//每组柱状条组中柱状条之间的间距
bardatasetspacing :5,
// 是否显示提示
showtooltips: true,
// 是否执行动画
animation: true,
// 动画的时间
animationsteps: 60,
// 动画的特效
animationeasing: "easeoutquart",
// 动画完成时的执行函数
onanimationcomplete: null
}
部分javascript实例
var barchart = new chart(ctx).bar(data, {
scalelabel: "$"+"<%=value%>",
//是否绘制柱状条的边框
barshowstroke: true,
//柱状条边框的宽度
barstrokewidth: 2,
//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
barvaluespacing: 5,
//每组柱状条组中柱状条之间的间距
bardatasetspacing: 5,
});
效果图：
饼图：
javascript:
new chart(ctx).pie(data,options);
数据结构：
var data=[
{
value:40,
color:"#21f0ea",//背景色
highlight:"#79e8e5",//高亮背景颜色
label:'javascript'//文字标签
},{
value:60,
color:"#e0e4cc",
highlight:"#eaedd8",
label:'jquery'
},{
value:100,
color:"#69d2e7",
highlight:"#83e5f7",
label:'html'
}
];
图标参数：
pie.defaults = {
//是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
segmentshowstroke : true,
//设置每段行程的边框颜色
segmentstrokecolor : "red",
//心啊是每段扇区边框的宽度
segmentstrokewidth :2,
//boolean - 是否执行动画
animation : true,
//number - 动画时间
animationsteps : 100,
//string - 动画的效果
animationeasing : "easeoutbounce",
//boolean -是否旋转动画
animaterotate : true,
//boolean - 是否动画缩放饼图中心（效果不错）
animatescale : true,
//function - 火动画完成时执行的函数
onanimationcomplete : null
}
部分javascript实例：
var ctx=document.getelementbyid("piechart").getcontext("2d");
window.piechart=new chart(ctx).pie(data,{
//是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
segmentshowstroke : true,
//设置每段行程的边框颜色
segmentstrokecolor : "red",
//每段扇区边框的宽度
segmentstrokewidth :2,
//boolean - 是否执行动画
animation : true,
//number - 动画时间
animationsteps : 100,
//string - 动画的效果
animationeasing : "easeoutbounce",
//boolean -是否旋转动画
animaterotate : true,
//boolean - 是否动画缩放饼图中心（效果不错）
animatescale : true,
//function - 动画完成时执行的函数
//onanimationcomplete : null
});
效果图：
环形图：
javascript:
new chart(ctx).doughnut(data,options);
数据结构：
//数据结构（与饼图相似）
var data = [{
value: 30,
color: "#f7464a",
highlight: "#fa7c7c",
label: "angularjs"
}, {
value: 50,
color: "#e2eae9",
highlight: "#f2f5f5",
label: "juqery"
}, {
value: 100,
color: "#d4ccc5",
hightlight: "#dbd6d1",
label: "javascript"
}, {
value: 40,
color: "#949fb1",
highlight: "#afbcce",
label: "nodejs"
}, {
value: 120,
color: "#4d5360",
highlight: "#767c86",
label: "html"
}];
图标参数：
doughnut.defaults={
//是否显示每段行程（即环形区，不为true则无法看到后面设置的边框颜色）
segmentshowstroke: true,
//设置每段行程的边框颜色
segmentstrokecolor: "#fff",
//设置每段环形的边框宽度
segmentstrokewidth: 2,
//图标中心剪切圆的比例（0为饼图，接近100则环形宽度越小）
percentageinnercutout: 50,
//是否执行动画
animation: true,
//执行动画时间
animationsteps: 100,
//动画特效
animationeasing: "easeoutbounce",
//是否旋转动画
animaterotate: true,
//是否缩放图表中心
animatescale: true,
//动画完成时的回调函数
// onanimationcomplete: null
}
效果图：
chart.js总共有六大图表：除此之外，还有剩下两种：雷达图或蛛网图、极地区域图，读者请自行参考：chart.js中文文档
那么，问题来了！？图表的图例怎么办？这货在应用中也是很常用的！经过多次的查阅，找到以下方法实现图例部分，膜拜一下各路大神先！除此之外，还可以动画完成后将各组数据自动显示，而不用手动查看各组数据！
直接上各部分代码：
html部分：
<h2>柱状图</h2> <canvas id="barchart" width="400" height="300"></canvas> <!--这里添加了用来放置图例的div标签--> <div id="legend"></div>
css部分：（不设置基础样式的话，可能看不出预期的效果）
<style>
ul,li{
list-style-type:none;;
}
ul>li{
margin:5px auto;
font-family: "微软雅黑";
}
span{
display: inline-block;
width:20px;height:20px;line-height: 20px;
vertical-align:middle;
margin-right:5px;
}
</style>
javascript部分：
window.onload = function() {
var ctx = document.getelementbyid("barchart").getcontext("2d");
var barchart = new chart(ctx).bar(data, {
showtooltips: false, // 是否显示提示,这里需要设置为false
//模板
legendtemplate:
'<ul class=\"<%=name.tolowercase()%>-legend\">'+
'<% for (var i=0; i<datasets.length; i++){%>'+
'<li><span style=\"background-color:<%=datasets[i].fillcolor%>\"></span>'+
'<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>'+
'<%}%>'+
'</ul>',
onanimationcomplete: function() {//动画完成后显示对应的数据
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillstyle = this.scale.textcolor;
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
this.datasets.foreach(function(dataset) {
dataset.bars.foreach(function(bar) {
ctx.filltext(bar.value, bar.x, bar.y);
});
});
}
});
var legend = document.getelementbyid('legend');
// 图例
legend.innerhtml = barchart.generatelegend();
}
//数据结构：
var data = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [{
fillcolor: "rgba(220,220,220,0.5)",
strokecolor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
label: "本月销售额"//图例标签
},{
fillcolor: "#69d2e7",
strokecolor: "#b2e5ed",
data: [54, 99, 72, 61, 86, 65, 84],
label: "本季度销售额"
}]
};
效果图：
总结：
chart.js中的六种图表，js部分大致分为数据结构、图表参数（通用参数以及各自特有参数）和实例化引用三大部分，而数据的动态加载可在数据结构中的data属性传入json等数据文件或变量。在多处实战中可能需要用到数据图表，呈现给用户更好的用户体验，此次学习简记以便日后复习、使用！希望对大家的学习有所帮助，也希望大家多多支持。