插件描述：Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。
更新时间：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文件
1 | <script src="Chart.js"></script> |
2、 创建图表。为了创建图表，我们要实例化一个Chart对象。为了完成前面的步骤，首先需要需要传入一个绘制图表的2d context。以下是案例。
1 | <canvas id="myChart" width="400" height="400"></canvas> |
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中提供的具体类型的图表了。
具体有关某个类型图表的用法，大家参阅文档吧。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 漂亮的富文本编辑器WYSIWYG
- 下一个特效： 不容错过的内嵌代码编辑器高亮代码-JSFIDDLE