Chart.js 轻量级HTML5图表绘制工具库（知识整理）

日期：2021-04-02 栏目：程序人生浏览：次

Chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5 canvas技术，Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k）。值得推荐学习！

GitHub源码： https://github.com/nnnick/Chart.js

Chart.js文档：

步骤：

html部分：

javascript部分：

引入Chart.js文件；

创建图表：实例化Chart对象（获取DOM节点取得2d context环境后实例化）；

实例化Chart对象后就继续创建具体类型的图表了；

曲线图（Line chart）：

html:

javascript:(引入及两种使用方式)

数据结构：

//数据结构（数据参数设置） 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文件引入部分省略：（之后的图表类型也同样省略!）

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

柱状图：

new Chart(ctx).Bar(data,options);//简记，options可缺省

数据结构：

转载注明出处：http://www.heiqu.com/49b6f32303f06aacb1654b1d2a97cf85.html

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

相关推荐