Chart.js 教程绘制曲线图（Line chart）

文章目录[隐藏]

Chart.js特性
引入Chart.js文件
创建图表
曲线图（Line chart）

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变量。

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

创建图表

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

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

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 : "<%=value%>",
```
```
 
```

	//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
```
```
 
```
```
}
```

发布日期： 2016-07-22 作者： 511遇见

所属分类： JavaScript/jquery 标签： Chart.js　javascript

您可能感兴趣的文章:

▪ Js显示隐藏DIV

▪ JavaScript（数组） Array对象创建合并数组

▪ 编写规范简洁高效优美JavaScript代码

▪ Underscore.js去弥补jQuery 没有实现的功能

▪ PHP+jQuery+html5实现文章缩略图裁剪2016-08-17

▪ 响应式导航插件Responsive Nav|511遇见强烈推荐2016-05-30

▪ PHP+jQuery+html5+Ajax多图预览无刷新上传（附源码下载）2016-08-18

▪ 初始性能优异的MVVM框架Vue.js2016-08-25

▪ JavaScript中易犯的十个小错误2016-07-26

▪ WordPress 3D旋转彩色标签云2015-12-15

▪ jQuery hover鼠标经过移开增加删除class2017-02-18

▪ Html5和js实现图片上传后即时预览2016-09-25

▪ js+jquery+css3炫酷幻灯片宽屏轮播效果2016-10-02

Htlm5本地存储和连线时段储存应用举例

Underscore.js去弥补jQuery 没有实现的功能

511遇见

不一样的遇见

Chart.js 教程绘制曲线图（Line chart）

Chart.js特性

引入Chart.js文件

创建图表

曲线图（Line chart）

简介

使用案例

数据结构

图表参数

您可能感兴趣的文章:

相关文章: