html前端图表显示范围,HTML5线性图表 图表数据区域可着色

本文作者html5tricks，转载请注明出处

利用HTML5图表插件，它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件，这款线性图表可以在不同的数据区域内绘制不同的颜色，让每一个数据区域都非常明显可见。

下面我们一起来看看实现这款HTML5图片的过程及源码，代码并不复杂，主要由HTML、CSS和JavaScript组成，我们逐步分解来看看。

HTML代码：

HTML代码很简单，只是定义了一个Canvas标签，我们的图片就在这个canvas上绘制。

CSS代码：

.wrapper {

padding: 50px 0;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

background: #fff;

}

#canvas {

display: block;

margin: 0 auto;

}

由于图片并没有太多华丽的界面，因此CSS代码也非常简单。

JavaScript代码：

首先引用图表的核心脚本库：

最后初始化即可：

var myData = {

labels : ["Mo","Di","Mi","Do","Fr","Sa","So"],

datasets : [

{

fillColor : "rgba(220,220,220,.5)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

data : [65,59,90,81,56,55,40]

},

{

fillColor : "rgba(90,190,90,.5)",

strokeColor : "rgba(90,190,90,1)",

pointColor : "rgba(90,190,90,1)",

pointStrokeColor : "#fff",

data : [40,48,40,40,90,27,90]

}

]

}

new Chart(document.getElementById("canvas").getContext("2d")).Line(myData)

从上面的代码可以看出，这款图表的使用还是非常简单的。