jQuery 实现Bootstrap Chart 图表

很多时候我们制作报表的时候需要图表，如果你使用bootstrap开发你的网站，如果你需要使用图表，那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法

1、引入chart.js

1	<script src="Chart.js"></script>

2、创建图表

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

1	<canvas id="myChart" width="400" height="400"></canvas>

1 2 3

//Get the context of the canvas element we want to select var ctx = document.getElementById("myChart").getContext("2d"); var myNewChart = new Chart(ctx).PolarArea(data);

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后，我们就可以继续创建Chart.js中提供的具体类型的图表了

使用jQuery chart 绘制柱状图（Bar chart）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

new Chart(ctx).Bar(data,options);   //数据结构 var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", data : [28,48,40,19,96,27,100] } ] }

效果如下图所示：

使用jQuery chart 绘制曲线图（Line chart）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

new Chart(ctx).Line(data,options); //数据结构 var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.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(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }

效果如下图所示：

使用jQuery chart 极地区域图（Polar area chart）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

new Chart(ctx).PolarArea(data,options); //数据结构 var data = [ { value : 30, color: "#D97041" }, { value : 90, color: "#C7604C" }, { value : 24, color: "#21323D" }, { value : 58, color: "#9D9B7F" }, { value : 82, color: "#7D4F6D" }, { value : 8, color: "#584A5E" } ]

效果如下图所示：

这里只是几个例子，更多的例子可以参考 Bootstrap Chart.js 中文文档