JS组件系列——开源免费图表组件：Chart.js

素颜马尾好姑娘i 2022-07-13 02:51 222阅读 0赞

前言：最近被开源免费得有点上火了，各种组件首先想到的就是是开源否、是否免费、是否和bootstrap风格一致。想着以后做报表肯定要用到图表组件的，于是在[Bootstrap中文网][Bootstrap]上面找到了Chart.js，总的来说，这个组件不能说最好，但是对于一般不太复杂的报表是够用了。今天就来看看它如何使用吧。

## 一、组件比较以及选用 ##

其实说起报表组件，网上一搜一大把，各种让人眼花缭乱的组件，但貌似比较出名一点的都是收费的。综合来看：

JsChart组件功能强大，能适应各种复杂的需求和业务；Chart.js免费。

FunsionChart界面优美，效果炫，用户体验好；Chart.js免费。

HighChart使用方便，调用简单，开发效率高；Chart.js免费。

如果你说：咱们公司不缺钱，当然是哪个最好用哪个喽。那博主只能说：有钱，任性。至少博主所在的公司是把免费放在选用组件的第一原则的。

chart.js源码：[https://github.com/nnnick/Chart.js][https_github.com_nnnick_Chart.js]

chart.js 英文文档：[http://www.chartjs.org/docs/][http_www.chartjs.org_docs]

chart.js 中文文档：[http://www.bootcss.com/p/chart.js/docs/][http_www.bootcss.com_p_chart.js_docs]

## 二、组件效果展示 ##

上面扯了一大堆没用的，先来一组效果图看看吧。

### 1、柱状图 ###

原始的柱状图

![459756-20151209111108043-1476482814.png][]

加上图表说明和tooltip的柱状图

![459756-20151209111152886-1956061248.png][]

![459756-20151209111201168-765083958.png][]

### 2、饼状图 ###

![459756-20151209112442340-1149351544.png][]

![459756-20151209112451636-1289695321.png][]

![459756-20151209112459371-1515009186.png][]

### 3、曲线图 ###

![459756-20151209112514871-119339346.png][]

### 4、环状图 ###

![459756-20151209112522152-1998633512.png][]

### 5、极地区域图 ###

![459756-20151209112531480-1974501729.png][]

### 6、雷达图 ###

![459756-20151209112542011-2031703758.png][]

## 三、代码示例 ##

关于chart.js的使用代码其实不用多说，文档里面很容易看懂。这里就简单展示一个：

chart.js的原理是使用html5的canvas标签，所以首先它需要一个canvas的标签放在cshtml页面

然后js里面（我们先以柱状图为例来说明）

![复制代码][copycode.gif]

![复制代码][copycode.gif]

如果是做业务需求，一般来说，data的数据是从后台构造成指定格式的json对象然后传递到前端。前端调用的时候只需要简单的两句：

var ctx = $("#myChart").get(0).getContext("2d");
    new Chart(ctx).Bar(data);

如果是需要修改它的默认显示参数，则可以指定options

![复制代码][copycode.gif]

![复制代码][copycode.gif]

然后在调用的时候稍作修改：

$(function () {
        var ctx = $("#myChart").get(0).getContext("2d");
        var myNewChart = new Chart(ctx);
        myNewChart.Bar(data, options);
    });

这里需要说明的一个地方是：由于使用的是chart.js 1.0.2版本，所以下图右下角的那个说明的块是博主自己在onAnimationComplete这个事件里面通过js加上去的

![459756-20151209115134527-772879425.png][]

好像新版的chart.js是自带的这个功能。等待发布！

## 四、总结 ##

至此，柱状图的使用就说完了。其他图表的用法和这个相似度达到90%，博主就不一一介绍了，待会直接上源码。总的来说，这个组件开源、免费，然后它非常轻量级，不依赖任何的js组件（如果上面的代码中不用jQuery，可以直接用DOM的方法去取），整个js压缩后仅仅4.5K大小。然而由于它的原理是基于html5的，所以对浏览器有一定的要求，并且它对IE7、IE8有降级处理方案，详见[Chart.js中文文档][http_www.bootcss.com_p_chart.js_docs]。附上[源码][Link 1]，有需要看看。

[Bootstrap]: http://www.bootcss.com/
[https_github.com_nnnick_Chart.js]: https://github.com/nnnick/Chart.js
[http_www.chartjs.org_docs]: http://www.chartjs.org/docs/
[http_www.bootcss.com_p_chart.js_docs]: http://www.bootcss.com/p/chart.js/docs/
[459756-20151209111108043-1476482814.png]: /images/20220713/101a072120eb47e7856bb00f79d3338d.png
[459756-20151209111152886-1956061248.png]: /images/20220713/0a60766e62d94af98c14dfc9230d8fb7.png
[459756-20151209111201168-765083958.png]: /images/20220713/3a0ff220bfc345ab8a8ee99de90e7250.png
[459756-20151209112442340-1149351544.png]: /images/20220713/686738a07b5e40ad81528912e3c3adf1.png
[459756-20151209112451636-1289695321.png]: /images/20220713/ed3452b159034e4ab2bd80f582160171.png
[459756-20151209112459371-1515009186.png]: /images/20220713/e03c58c474ea44b6941e8843eb0d6e99.png
[459756-20151209112514871-119339346.png]: /images/20220713/785f6986839e434cb3036ac86c992876.png
[459756-20151209112522152-1998633512.png]: /images/20220713/efaf3d012e4949b98c98093623ac951e.png
[459756-20151209112531480-1974501729.png]: /images/20220713/c49175127489437a9f1c0957f54b1b48.png
[459756-20151209112542011-2031703758.png]: /images/20220713/bf60faf9590c42cb857a4db4dcc22be2.png
[copycode.gif]: /images/20220713/a302df048b9b4309b26eb79047a4d8a5.png
[459756-20151209115134527-772879425.png]: /images/20220713/3426553943ef41d78c82f31152cab482.png
[Link 1]: http://pan.baidu.com/s/1boo1Fgr