js的报表插件库--Chart.js

http://www.jq22.com/jquery-info100

几天我要给大家介绍一款图表插件，相信大家会用到的。官方介绍了如下特点
1、6种图表类型
Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。
2、基于HTML5
Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案
3、简单、灵活

Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法。

预览图

width="474" height="300" title="jquery图表,html5图表" alt="jquery图表,html5图表"/>

使用步骤

1、我们首先需要引入以下的js和css文件

1

<br>

2、 创建图表。为了创建图表，我们要实例化一个Chart对象。为了完成前面的步骤，首先需要需要传入一个绘制图表的2d context。以下是案例。

1

<br>

3、加入js代码

1

2

 var ctx = document.getElementById("myChart").getContext("2d");

var myNewChart = new Chart(ctx).PolarArea(data);

我们还可以用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点，然后在这个DOM节点上调用 getContext(“2d”) 方法

1

2

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

var myNewChart = new Chart(ctx);

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后，我们就可以继续创建Chart.js中提供的具体类型的图表了。
下面就是根据自己的需要用js代码实现不同的图表
详情参阅 中文文档
图表类型
曲线图（Line charts）
alt=""/>
柱状图（Bar charts）
alt=""/>
雷达图或蛛网图（Radar charts）
alt=""/>
饼图（Pie charts）
alt=""/>
极地区域图（Polar area charts）
alt=""/>
环形图（Doughnut charts）
alt=""/>

具体有关某个类型图表的用法，大家参阅文档吧。