HTML5线性图表图表数据区域可着色

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

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

html5-line-chart

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

HTML代码：

<canvas height='300' id='canvas' width='900'></canvas>

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代码：

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

<script src='js/Chart.min.js'></script>

最后初始化即可：

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)

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

在线演示源码下载