用js绘制html5数值曲线,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变量。

创建图表

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

Html:

Javascript:

//Get the context of the canvas element we want to select

var ctx = document.getElementById("myChart").getC