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)

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

在线演示源码下载

扫描下方二维码关注公众号

发送消息 jymm 获取 解压密码

分享HTML5/CSS3技术;jQuery插件;Vue、React等前端开发组件

热门推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>