使用Chart.js图表库制作漂亮的响应式表单
入门基础
Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表。
主要特性包括:
1、支持6种不同的表格类型:曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。
2、基于HTML5开发,支持所有浏览器(包括IE7/8).
3、不依赖于其他任何库,仅有4.5k大小,并且可以进行定制。
Chart.js是一个基于HTML5canvas的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项。如果这些还不够,你还可以创造自己的图表类型。
Chart.js的六种图表类型代码一共只有11kb大,并做了gzip压缩处理,另外该库是模块化的,你可以仅仅使用自己需要的图表类型,从而进一步节省了空间。下面是包含该库的cdnjs链接。
JavaScript
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
可用的设置项
从提示信息到动画效果(校稿者注:tooltip是指鼠标移动到某个元素上弹出的提示信息),Chart.js允许你改变图表的几乎所有特征。在本节,我将会修改一些设置,以展示Chart.js是如何被创建出来的。我们将从下面的HTML代码开始:
XHTML
<canvasid="canvas"></canvas>
对于首次展示,我会创建一个折线图。为了使图表有意义,这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在X轴。我已经为折线图模拟了一些数据,这些数据被分开放到一个数组里面去,每个数据有自己的填充颜色、折线和点集。
在这个例子中,我将fillColor设置为透明。如果你不设置fillColor的值,将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用RGBA、RGB、hex或HSL格式定义,与CSS是一样的。
JavaScript
varlineData={ labels:['Data1','Data2','Data3','Data4', 'Data5','Data6','Data7'], datasets:[{ fillColor:'rgba(0,0,0,0)', strokeColor:'rgba(220,180,0,1)', pointColor:'rgba(220,180,0,1)', data:[20,30,80,20,40,10,60] },{ fillColor:'rgba(0,0,0,0)', strokeColor:'rgba(151,187,205,1)', pointColor:'rgba(151,187,205,1)', data:[60,10,40,30,80,30,20] }] }
设置全局选项
在代码中我已经设置了一些全局值。animationSteps决定了动画的持续时间。根据需要,你可以修改更多的选项,比如scaleLineColor和scaleIntegersOnly。我建议浏览Chart.js文档查看库中提供的其他选项。
JavaScript
Chart.defaults.global={ animationSteps:50, tooltipYPadding:16, tooltipCornerRadius:0, tooltipTitleFontStyle:'normal', tooltipFillColor:'rgba(0,160,0,0.8)', animationEasing:'easeOutBounce', scaleLineColor:'black', scaleFontSize:16 }
设置专有的图表选项
除了全局选项,还有一些针对特定图表类型的配置选项。在这个折线图中,我将会设置这类选项,希望对你有所启发:
JavaScript
Chart.defaults.global={ animationSteps:50, tooltipYPadding:16, tooltipCornerRadius:0, tooltipTitleFontStyle:'normal', tooltipFillColor:'rgba(0,160,0,0.8)', animationEasing:'easeOutBounce', scaleLineColor:'black', scaleFontSize:16 }
Chart.js生成的图表默认为非响应式。将responsive设置为true可以使其转化为响应式图表。如果你需要让每个图表都成为响应式的,我推荐设置全局值,就像这样:
JavaScript
Chart.defaults.global.responsive=true;
下面你会看见这个折线图的示例:
SeethePenChart.jsResponsiveLineChartDemobySitePoint(@SitePoint)onCodePen.
增加与移除动态数据
有时你需要展示时刻变化的数据。股票市场便是这个应用场景的典型例子。这本节中我将会创建一个柱形图,并且在动态删除数据的同时增加数据。我会使用一些随机数据,并在这个例子中通过柱形图来展示数据。本例中的大部分代码与上一个例子相似。一旦我们拥有自己的HTML(与上一个例子一样),便可以添加自己的JavaScript。
首先我们需要编写代码将动态数据填充进图表。我使用function表达式生成随机值,然后将其赋给一个变量dData。这些值会在需要变化时为我们提供随机的数据。像之前的例子一样,我创建了一个标签数组和数据集,并设置了一个任意的fillColor。
JavaScript
vardData=function(){ returnMath.round(Math.random()*90)+10; }; varbarData={ labels:['dD1','dD2','dD3','dD4', 'dD5','dD6','dD7','dD8'], datasets:[{ fillColor:'rgba(0,60,100,1)', strokeColor:'black', data:[dData(),dData(),dData(),dData(), dData(),dData(),dData(),dData()] }] }
现在是时候编写代码来为我们的图表删除与添加柱形了。开始时我们初始化index的值为11,我使用了两个方法:removeData()和addData(valuesArray,label)。调用实例的removeData()方法删除图表所有数据集的第一个值。在barChartDemo这个例子中,数据集的第一个值被移除了。调用addData()顺着标签传递一个数组值,在图表的最后增加一个新的数据节点。下面的代码片段每3秒钟会更新一次图表。
JavaScript
varindex=11; varctx=document.getElementById('canvas').getContext('2d'); varbarDemo=newChart(ctx).Bar(barData,{ responsive:true }); setInterval(function(){ barDemo.removeData(); barDemo.addData([dData()],'dD'+index); index++; },3000);
另一个更新图表数值的方法是直接设置数值。在下面的例子中,第一行是将第一个数据集的第二个柱形的数值设为60。如果你在这时更新,柱形会通过动画将其当前值变为60。
JavaScript
barDemo.datasets[0].bars[2].value=60; barDemo.update();
这里是柱形图的示例(由SitePoint在CodePen上创建):
SeethePenChart.jsResponsiveBarChartDemobySitePoint(@SitePoint)onCodePen.
结论
这个教程覆盖了关于Chart.js的一些重要功能。第一个例子展示了一些全局设置的使用,同时,Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求,你还可以创造自己的图表类型。我推荐你浏览文档,加深关于该库什么可以做,什么无法做的认识。