Chart.js的数据visualization和应用

JavaScript018

Chart.js的数据visualization和应用,第1张

Chart.js是一款样式简介大气的Visualization数据的API。它使用起来非常方便，只需要提供一组dataset参数，图表就会自动产生。并且可以改变图表的颜色，字体大小，标题，并且加上onclick函数等对图表进行交互性操作。

我将他分为两类，静态图表和动态图表。静态图表指图表创立的时候数据为常数。动态图表指数据为变量。运用chart.js时，首先要它需要你在网页中创建一个canvas标签来承载生成的图表（条形图，线形图，扇形图等等）。

静态图表比较简单，只需要将datasets中间的data填满想要显示的数据即可。如果想要显示不止一条线，可以加入多组dataset。

动态图表则不能直接罗列数据，因为数据的个数和值不再是常量。这时候可以选择用AJAX将数据从controller传到view。下图的callback function 指的是当你从对应的url收到数据时会调用的函数。例子如下：架设我现在想要显示一个横轴为自己定义的时间，纵轴为值的折线图，通过ajax收到的数据data是一个数组。

用数组DatasetsArray来存储数据的值，颜色，label等各种性质。在循环中遍历数组number，讲值赋予DatasetsArray的data项，并同时可以定义当前dataset的其他性质，包括label，bordercolor，是否填充颜色等等。

给dataset赋值结束后，便可以开始画图了，如下图直接将DatasetsArray赋值给datasets量即可。

在dataset后还可以加上许多其他的参数，定义图表的各个属性，如x坐标轴的字体大小，legend的名字等。

加上onclick function也是一种很实际的做法，可以让你的图表包含更多信息量且高端。比如说，你想点中图表的某个数据点然后跳转到某个页面，相当于这个点被active，则可以使用以上方法。

总之，chart.js是一个很实用易上手看起来高端的数据visulization方法。

Chart.js是一个基于HTML5的开源图表库，可以方便简洁的绘制美观的图表。

主要特性包括：

1、支持6种不同的表格类型：曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。

2、基于HTML5开发，支持所有浏览器（包括IE7/8）.

3、不依赖于其他任何库，仅有4.5k大小，并且可以进行定制。

Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型，每种类型都带有一系列的自定义选项。如果这些还不够，你还可以创造自己的图表类型。