如何使用Chart.js来创建漂亮图表的所有知识

如何使用Chart.js来创建漂亮图表的所有知识

Chart.js创建漂亮图表的所有知识

Chart.js 中文文档地址：http://www.bootcss.com/p/chart.js/docs/

引入Chart.js文件

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

<script src=”Chart.js”></script>

创建图表

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

<canvas id=”myChart” width=”400″ height=”400″></canvas>

//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”) 方法。

//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）。

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

We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the options you pass in with the default options for that chart type.