优秀的图表绘制工具库-CHART.JS

 查看演示  website  立即下载

更新时间：2019-09-18 17:10:38

更新说明：修改演示地址失效问题，修改新的jq库调用地址。

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

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

使用步骤

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

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

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

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

3、加入js代码

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

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

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

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

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

PREVIOUS:
NEXT:
不容错过的内嵌代码编辑器高亮代码-JSFIDDLE
漂亮的富文本编辑器WYSIWYG