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

用不同的方式可视化你的数据。每种类型的图表都是动画的，看起来很棒，即使是在视网膜屏幕上。基于HTML5画布技术，Chart.js不依赖任何外部工具库，轻量级(压缩后只有4.5k)。值得学习！

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

图表. js文件：http://www.bootcss.com/p/chart.js/

步骤：

Html部分：

canvas id=' my chart ' width=' 400 ' height=' 400 '/canvas JavaScript部分：

引入Chart.js文件；创建图表：实例化图表对象(获取DOM节点，获取2d上下文环境后实例化)；实例化图表对象后，继续创建特定类型的图表；图表(折线图):

html:

Canvas ID=' my chart ' width=' 600 ' height=' 400 '/Canvas JavaScript 3360(简介和两种使用模式)

script src=' http : js/chart . min . js '/script script type=' text/JAVAScript '/方法1:varctx=document . getelementbyid(' my chart ')。get context(' 2d ')；var MyNewChart=新图表(ctx)。行(数据)；//这样只加载数据集，不修改默认参数(简称方法1)。//数据结构(数据参数设置)var数据={//折线图需要为每个数据点设置一个标签。这显示在x轴上。labels :[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月'，//数据集(Y轴数据范围随数据集中的最大或最小数据而动态变化)数据集： [{FillColor :' RGBA (220，220，220，0.5)'，//背景填充颜色strokeor 3360 ' RGBA(220，220)//路径颜色pointcolor 3360 ' rgba(220，220)/script数据结构：

//数据结构(数据参数设置)var数据={//折线图需要为每个数据点设置一个标签。这显示在x轴上。labels :[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月'，//数据集(Y轴数据范围随数据集中的最大或最小数据而动态变化)数据集： [{FillColor :' RGBA (220，220，220，0.5)'，//背景填充颜色strokeor 3360 ' RGBA(220，220)//路径颜色pointcolor 3360 ' rgba(220，220)图标参数：

Line.defaults={//网格线是否在数据线顶部，scaleOverlay : false，//是否通过硬编码重写y轴网格线scaleOverride : false，//* *如果scaleOverride为true，则必选* *//y轴上的刻度数为3360 null，y轴上每个刻度的宽度为3360 20。//y轴scalestartvalue:的起始值为null，//y/x轴scaleline color3360' rgba (0，0，0.1)'，//x，y轴scaleline width3360 1的宽度，//标尺是否显示标签，即y轴上是否显示文本scaleshowlabels : true，//y轴上的标尺，即文本scale label 3360“%=value %”，//字体scalefontfamily即：线是否弯曲bezierCurve: true，//是否显示点号pointdot: true，//点大小pointDotRadius:5，//点的描边宽度，即：点的外白尺寸pointDotStrokeWidth: 2，//数据集描边(连接路径)datasetsstroke: true，//线的宽度，即： dataset stroke ///动画特效动画easing :' easeoutquarter '，//动画完成时的执行功能/* on imationcomplete : null */}(意思是你刚接触了Chart.js，看到这个图表参数整个人都被搞糊涂了，整个过程都是用英文标注的，呵呵~)

了解图表参数后，您可以自定义图表参数。让我们看一下具体例子的用法：

Html部分和js文件介绍部分省略：(以下图表类型也省略！)

脚本类型='text/javascript' //相同数据参数设置var data={//折线图需要为每个数据点设置一个标签。这显示在x轴上。标签:[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月']，//此处的thisId对应于标签[12，22，50，44，99，99]的ID Thisids:数据集(Y轴数据范围随数据集中的最大或最小数据而动态变化)数据集： [{FillColor :' RGBA (220，220，220，0.5)'，//背景填充颜色StrokeColor 3360window . onload=function(){ var CTX=document . getelementbyid(' myChart ')。getContext(' 2d ')；//方法2:传入对象文字修改默认图标参数，自定义图表var my new chart=new chart (CTX)。线条(数据，{//网格颜色scale gridlinecolor : ' rgba(255，0，0，1)'，//y/X轴的颜色scalelinecolor:' rgba (0，0，0，1)'，//文本大小scalefontsize 3360 16，//文本颜色scalefontcolor3360' # 666 '，//网格颜色scalegridlinecolor3360' rgba (0，0)，即：行是否弯曲//是否动画console . log(data . this ids)；} });}/脚本渲染：

直方图：

新图表。栏(数据、选项)；//简而言之，选项可以默认数据结构：

var数据={ labels : ['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月']，数据集： [ { fillColor : 'rgba(220，220，220，0.5 ')，strokeColor : 'rgba(220，220，220，1 ')，数据： [65，59，90，81，56，55，40] }，{ fillColor

Bar.defaults={//网格线是否在数据线顶部，scaleOverlay : false，//是否通过硬编码重写y轴网格线scaleOverride : false，//* *如果scaleOverride为true，则必选* *//y轴的刻度数为： null，y轴的每个刻度的宽度为： null，y轴的起始值为： null。//y/x轴刻度线颜色：' rgba (0，0，0，1)'，//x，y轴刻度线宽度3360 1，//刻度是否显示标签，即y轴是否显示文本scaleshowlabels 3360 false，//y轴上的刻度，即文本scalelabel 3360“%=value %”，//font scalefontfamily 3360 ' ' arial ' '，//text size scalefontsize 3360 12，//text style//条形图图表具体参数：//是否绘制边框barshowstroke3360 true，//宽度barstrokewidth3360 2。//列条组之间的间距(如果过大或过小，会出现重叠偏移和错位的效果，请控制合理值)。BarvaluesPacing 33605。//每个列条组中列条之间的间距为Bardatasetspating 33605。//是否显示提示showTooltips:为真？//是否执行动画animation: true，//动画时间animationSteps: 60，//动画特效动画easing: ' easeoutquarter '，//动画完成时执行函数onanimationcomplete : null一些javascript示例

Var条形图=新图表(CTX)。bar(数据，{scalelabel:' $''%=value% '，//是否绘制边框barshowstroke3360true，//边框barstrokewidth33602的宽度，//列栏组之间的间距(如果过大或过小，会出现重叠偏移和错位的效果，请控制合理值)。BarvaluesPacing 3360 5，//每个列栏组中列栏之间的间距为barDatasetSpacing: 5，})；渲染：

饼图：

javascript:

新图表。饼图(数据、选项)；数据结构：

Vardata=[{value:40，color:' # 21f0ea '，//背景色highlight:'#79E8E5 '，//'，//高亮背景色label : ' JavaScript '//text label }，{ value:60，color:'#E0E4CC '，highlight:'#EAEDD8 '，label:'jquery' }，{ value 3:1010100图标参数：

Pie.defaults={//是否显示每次行程(即扇形，如果不是真的，以后就看不到边框颜色设置了)。//设置每次行程的边框颜色，segmentStrokeColor :红色’。//heart是每个扇形边框的宽度segmentstrokewidth:2，//Boolean-是否执行动画动画3360true，//number-动画时间animationSteps : 100，//String-动画效果animation eas : ' ease outbounce '，//Boolean-是否旋转动画animateRotate : true，//Boolean-是否对饼图中心进行动画处理(效果不错)；//function-fire动画完成时执行的函数on imation complete : null }一些javascript示例：

var CTX=document . getelementbyid(' PieChart ')。getContext(' 2d ')；窗口.饼图=新图表(CTX)。饼图(数据，{//是否显示每次行程(即扇形，如果不是真的，以后就看不到边框颜色设置了)。//设置边框颜色segmentstrokecolor: '红色'，//每个扇区的边框宽度segmentstrokewidth33602，//Boolean-是否执行动画： true，//Number-动画时间动画步数： 100，//string-动画效果动画easing3360 ' easeoutbounce '，//Boolean-是否旋转动画animateRotate : true，//Boolean-是否动画饼图中心(效果不错)；//函数-动画完成时要执行的函数；//on imationcomplete : null })；渲染：

环形图：

javascript:

新图表。甜甜圈(数据、选项)；数据结构：

//数据结构(类似饼图)var data=[{value: 30，color3360' # f7464a '，highlight3360' # fa7c '，label:' angular js'}，{value3360 50，color: '#E2EAE9 '，highlight: '#F2F5F5 '，label: 'juqery' }，{ value: 100，color 3:图标参数：

甜甜圈. defaults={ //是否显示每次行程(即环形区域，如果不是真的，以后就看不到边框颜色设置了)。//设置每个行程分段的边框颜色StrokeColor: '#fff '。//设置每个环形segments的边框宽度segmentStrokeWidth: 2，//图标中心切掉圆圈的比例(0为饼图，接近100时环形宽度较小)PercentageInnerCuut3360 50，//是否执行动画animation: true，//动画时间animationSteps: 100，//动画特效动画easing: ' easeoutbounce '，//是否旋转动画animaterootat: true

Chart.js中有六个图表：此外，还有另外两个图表：雷达图或蛛网图和极地图。读者应自行查阅Chart.js的中文文档。

那么，问题来了！图表的传说呢？这款产品在应用中也非常常用！经过多次咨询，找到以下方法实现传说，崇拜各行各业的大神！另外，你可以在动画完成后自动显示每组数据，而不是手动查看每组数据！

直接在代码的每个部分：

Html部分：

H2直方图/H2画布id='条形图'宽度=' 400 '高度=' 300 '/画布！-这里增加了放置图例的div标签-div id=' legend'/div CSS部分：(如果不设置基本样式，可能看不到预期效果)

样式ul，Li { list-style-type : none；} ulli { margin:5px autoFont-family: '微软雅黑'；} span { display : inline-block；宽度：20 px；高度：20 px；线高： 20px；垂直对齐：毫米；右边距：5 px；} /stylejavascript部分：

窗户。onload=function(){ var CTX=document。getelementbyid(' barChart ').getContext(' 2d ')；var barChart=新图表(ctx).Bar(数据，{ showTooltips: false，//是否显示提示，这里需要设置为false //模板legend template : ' ul class=\ ' %=name。tolowercase()%-图例\ ' ' % for(var I=0；idata设置。长度；I){ % ' ' lispan style=\ '底色：%=数据集[I].fillColor%\'/span' '%if(数据集[i].标签){ % %=数据集[i].标签%%}%/li' '%}%' '/ul '，在imation complete : function(){//动画完成后显示对应的数据var CTX=这个。图表。CTX；CTX。font=this。规模。字体；CTX。FillStyle=这个。规模。TextColorCTX . textalign=' center CTX . text baseline=' bottom this . datasets . foreach(函数（数据集){数据集。酒吧。foreach(函数(bar) { ctx.fillText(bar.value，bar.x，bar。y)；});});} });var图例=文档。getelementbyid(' legend ')；//图例传奇。innerhtml=条形图。生成elevend()；} //数据结构：var data={ labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月]，数据集s :[{填充颜色： ' rgba(220，220，220，0.5)'，strokecolor 3360 ' rgba(220，220，220，1 ')，数据： [65，59，90，81，56，55，40]，标签: '本月销售额'//图例标签}，{ fillColor: '#69D2E7 '，strokeColor: ' # B2E5ED '，data: [54，99，72，61，86，65，84]，标签: '本季度销售额' }] };效果图：

总结：

图表。射流研究…中的六种图表，js部分大致分为数据结构、图表参数（通用参数以及各自特有参数)和实例化引用三大部分，而数据的动态加载可在数据结构中的数据属性传入数据等数据文件或变量。在多处实战中可能需要用到数据图表，呈现给用户更好的用户体验，此次学习简记以便日后复习、使用！希望对大家的学习有所帮助，也希望大家多多支持我们。