chart.js 图表刷新
Data is all around us. While search engines and other applications work most optimally with text based representation of data, people find data represented visually to be easy to comprehend. Earlier this year, SitePoint published Aurelio’s article presenting an introduction to Chart.js. This tutorial will provide a quick recap of that introduction followed by a deeper look into the features of Chart.js.
数据无处不在。 虽然搜索引擎和其他应用程序在基于文本的数据表示中可以最佳地工作,但是人们发现以视觉方式表示的数据很容易理解。 今年早些时候,SitePoint发表了Aurelio的文章,介绍了Chart.js的简介 。 本教程将快速概述该介绍,然后对Chart.js的功能进行更深入的研究。
入门 (Getting Started)
Chart.js is an HTML5 canvas based responsive, flexible, light-weight charting library. The library supports six different chart types, each of these chart types coming with a load of customization options. If that is not enough, you also have the ability to create your own custom chart types.
Chart.js是基于HTML5画布的响应式,灵活,轻量级的图表库。 该库支持六种不同的图表类型,每种图表类型都带有大量自定义选项。 如果这还不够,您还可以创建自己的自定义图表类型。
All six core chart types in Chart.js are just 11kb minified and gzip’d and the library is modular so you can further reduce the request size for the file by only including the chart type that you actually need. Below is the cdnjs link to include it:
Chart.js中的所有六种核心图表类型都仅压缩了11kb并进行了gzip压缩,并且该库是模块化的,因此您可以通过仅包含实际需要的图表类型来进一步减少文件的请求大小。 以下是包含它的cdnjs链接:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
可用的配置选项 (Available Configuration Options)
Chart.js allows you to change almost every aspect of your charts — from tool tips to animation. In this section I will modify a few settings to demonstrate what Chart.js is capable of creating. Here is the HTML we’ll start with:
Chart.js允许您更改图表的几乎每个方面-从工具提示到动画。 在本节中,我将修改一些设置以演示Chart.js能够创建的功能。 这是我们将开始HTML: