chartjs教程
在本教程中，我们将学习ChartJS，它是针对设计人员和开发人员的简单而灵活的JavaScript图表。
在我们开始之前，这里是我们需要做的事情的列表。
- 网页浏览器
- 文本编辑器或者IDE，用于编写代码
- ChartJS
- jQuery的
网络浏览器：以下任何一种网络浏览器都可以-Chrome，Firefox，Safari，Edge和IE。
文本编辑器：可以使用以下任何文本编辑器-记事本++，括号，Atom或者SublimeText。
IDE：我更喜欢使用eclipse和NetBeans，但是您可以选择任何其他IDE。
ChartJS：从其GitHub存储库下载ChartJS最新发行版。
单击此处以获取最新版本。
jQuery：我们还将需要可以从jquery.com下载的jQuery。
我们将在本教程中使用v1.12，您可以在此处获得。
项目结构
首先，我们将创建一个新的项目文件夹，并将其命名为chartjs2。
现在，在该项目文件夹中，我们将再创建两个文件夹，即css和js。
css文件夹将保存样式表文件，而js文件夹将保存javascript文件。
现在，我们将在js文件夹中复制jquery.js和chart.js文件。
最后，我们将在项目文件夹中创建一个index.html文件。
此时，我们的项目结构将如下所示。
index.html
在index.html代码中，我们将编写基本的html结构，并在正文末尾包含jquery和chartjs javascript文件。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS</title>
</head>
<body>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
</body>
</html>
创建画布以绘制图表
现在在" body"内部创建以下" canvas"元素，其id属性设置为chartcanvas，宽度设置为720，高度设置为480。
<canvas width="720" height="480" id="chartcanvas"></canvas>
写JavaScript
要绘制图表，我们需要创建Chart类的实例并传递canvas元素的节点。
在下面的代码中，我们将获得在上面创建的画布的上下文，然后实例化Chart类并将上下文和数据对象传递给它。
//get the canvas
var ctx = $("#chartcanvas");
//instantiate the Chart class
var chart = new Chart(ctx, {
type : "line",
data : {},
options: {
responsive : true
}
});
最终文件
此时，我们的index.html文件将如下所示。
注意！我们还没有任何图表。
我们将在本教程的后面部分介绍不同图表的绘制。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS</title>
</head>
<body>
<canvas width="720" height="480" id="chartcanvas"></canvas>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script type="text/javascript">
//get the canvas
var ctx = $("#chartcanvas");
//instantiate the Chart class
var chart = new Chart(ctx, {
type : "line",
data : {},
options: {
responsive : true
}
});
</script>
</body>
</html>
