Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。它非常简单帮你展现各种数据的图表展现形式，我们今天看看如何引入和基本的操作，并用它绘制一个制曲线图(Line chart)。

Chart.js特性

1、6种图表类型

Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。

◆ 曲线图(Line charts)

◆ 柱状图(Bar charts)

◆ 雷达图或蛛网图(Radar charts)

◆ 饼图(Pie charts)

◆ 极地区域图(Polar area charts)

◆ 环形图(Doughnut charts)

2、基于HTML5

Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。

3、简单、灵活

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

引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

创建图表

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

Html:

Javascript:

//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);

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

Javascript:

//Get context with jQuery - using jQuery's .get() method.

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

//This will get the first returned node in the jQuery collection.

var myNewChart = new Chart(ctx);

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。

Chart对象设置完成后，我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中，我们将展示如何绘制一幅极地区域图(Polar area chart)。

Javascript:

new Chart(ctx).PolarArea(data,options);

曲线图(Line chart)

简介

曲线图就是将数据标于曲线上的一种图表。

一般用于展示趋势数据，和比较两组数据集。

使用案例

Javascript:

new Chart(ctx).Line(data,options);

数据结构

Javascript:

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]

}

]

}

图表参数

Javascript:

Line.defaults = {

//Boolean - If we show the scale above the chart data

scaleOverlay : false,

//Boolean - If we want to override with a hard coded scale

scaleOverride : false,

//** Required if scaleOverride is true **

//Number - The number of steps in a hard coded scale

scaleSteps : null,

//Number - The value jump in the hard coded scale

scaleStepWidth : null,

//Number - The scale starting value

scaleStartValue : null,

//String - Colour of the scale line

scaleLineColor : "rgba(0,0,0,.1)",

//Number - Pixel width of the scale line

scaleLineWidth : 1,

//Boolean - Whether to show labels on the scale

scaleShowLabels : false,

//Interpolated JS string - can access value

scaleLabel : "",

//String - Scale label font declaration for the scale label

scaleFontFamily : "'Arial'",

//Number - Scale label font size in pixels

scaleFontSize : 12,

//String - Scale label font weight style

scaleFontStyle : "normal",

//String - Scale label font colour

scaleFontColor : "#666",

///Boolean - Whether grid lines are shown across the chart

scaleShowGridLines : true,

//String - Colour of the grid lines

scaleGridLineColor : "rgba(0,0,0,.05)",

//Number - Width of the grid lines

scaleGridLineWidth : 1,

//Boolean - Whether the line is curved between points

bezierCurve : true,

//Boolean - Whether to show a dot for each point

pointDot : true,

//Number - Radius of each point dot in pixels

pointDotRadius : 3,

//Number - Pixel width of point dot stroke

pointDotStrokeWidth : 1,

//Boolean - Whether to show a stroke for datasets

datasetStroke : true,

//Number - Pixel width of dataset stroke

datasetStrokeWidth : 2,

//Boolean - Whether to fill the dataset with a colour

datasetFill : true,

//Boolean - Whether to animate the chart

animation : true,

//Number - Number of animation steps

animationSteps : 60,

//String - Animation easing effect

animationEasing : "easeOutQuart",

//Function - Fires when the animation is complete

onAnimationComplete : null

}