本文包含在我们的选集Modern JavaScript中 。 如果您希望所有内容都集中在一个地方，以加快使用现代JavaScript的速度，请注册SitePoint Premium并下载一个副本。
本文由Tim Severien和Simon Codrington进行同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！
如果您的网站是数据密集型网站，那么您将需要找到一种使数据易于可视化的方法。 毕竟，人类在理解一长串原始数字方面并不出色。 这就是图表出现的地方-它们可以使复杂的统计关系变得明显和直观，并使非英语国家的使用者更容易使用。 每个人都以相同的速度理解基本图表，对于用技术术语充斥的段落则不能这么说。 在有益的情况下使用图表将使您的网站更易于理解，并且在视觉上更具吸引力。
在本文中，我将向您介绍一个名为Chart.js的JavaScript图表库。 通过六个时尚的示例，我将演示如何使用Chart.js可视化网站上的数据，以及如何配置它以满足您的需求。
为什么选择Chart.js？
我选择Chart.js是因为可以快速学习和利用它。 它在设计时考虑了简单性，但可高度自定义。 以我的经验，图表库属于复杂性范围，其中更复杂的库提供了更深入的自定义功能，但学习曲线也更陡峭。 Chart.js是学习最快，最简单的库之一，它不会严重限制您的选择。 它带有八种不同的图表类型，几乎可以满足您所有数据可视化需求。
开源社区积极地将Chart.js维持在高标准之下。 它最近达到了2.0版，其中进行了一些基本语法更改，以使代码更加一致，并提供了移动支持。 在本文中，我将使用Chart.js 2.0及其更新的语法。 在本文的结尾，在使您有机会了解Chart.js 2.0的工作原理之后，有一节介绍了1.0-> 2.0过渡以及在线阅读旧Chart.js示例时的期望。
安装Chart.js
同样，Chart.js专注于轻松。 易于学习，易于利用和易于安装。 如果您想深入了解实际代码， 请查看GitHub project 。
使用Chart.js只需要两件事。
1）库–对于本指南，我建议使用CDN，因为它是快速启动和运行的最简单方法。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
2） <canvas>元素，因为Chart.js利用HTML5画布。
</canvas><canvas id="myChart"></canvas>
或者，您可以使用程序包管理器来下载库。 有关更多信息，请参见《 入门指南》。
简单吧？ 现在，不用多说，让我们看一下Chart.js提供的功能。
折线图
这就是在Chart.js中创建最小折线图所需的全部。 声明HTML5画布后，只需将其放在<body>某个地方的<script></script>中即可。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
请参阅CodePen上的SitePoint （ @SitePoint ）的Pen 2 –折线图 。
如果这段代码看起来很紧张，请不要担心！ 所有Chart.js示例在大多数情况下都遵循上述格式，因此您只需学习一次即可。 让我们一行一行地了解正在发生的事情。
var ctx = document.getElementById("myChart").getContext('2d');
此行获取对我们之前创建的<canvas>元素的引用，然后在其上调用getContext方法。 getContext方法返回一个对象，该对象提供用于在画布上绘制的方法和属性 。 我们将此存储在名为ctx的变量中。
var myChart = new Chart(ctx, {
type: 'line',
data: // array of line data goes here
});
在这里，我们正在创建图表对象。 我暂时排除了数据，仅关注type属性，该属性确定了我们想要的图表的类型。 Chart.js的new Chart()构造函数采用两个参数：
- 引用将要渲染图表的
</canvas><canvas>元素，或者引用其2d绘图上下文（此处使用2d上下文）。 无论使用哪种方法，Chart.js约定都将其称为ctx。 - 一个对象文字，其中包含Chart.js将用来构建图表的数据和配置选项。 所需的属性是
type和data。 在我们的示例中，type为“折线”，因为我们需要折线图。data是用于填充图表的数据。
Chart.js使用数组位置来确定图形位置，因此“苹果”的第一个点的值为“ 12”，第二个点的值为“ 19”，依此类推。 添加新行就像添加带有label和data的新对象一样容易。
最后，我为每个数据集设置了rgba背景色，以使其在视觉上更具吸引力。
要了解有关Chart.js的折线图的更多信息， 请查看文档
专业提示：单击图表的任何图例（此处为“ Apples”和“ Oranges”）将切换该特定数据集。 这适用于所有图表类型。
条形图
条形图（大多数情况下）只是折线图，看上去有些不同。 通过更改上一个示例中的一行，我们可以创建一个条形图。
type: 'line'
至：
type: 'bar'
是的，真的很容易。
见笔2条形图由SitePoint（ @SitePoint上） CodePen 。
条形图的完整文档可在此处找到。
这是此示例的完整代码：
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["M", "T", "W", "R", "F", "S", "S"],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'oranges',
data: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
雷达图
雷达图是我最喜欢的类型，再次与折线图和条形图属于同一系列。 雷达图只是具有径向X轴与直线相对的折线图。 要获取快速雷达图，请更改：
type: 'bar'
至：
type: 'radar'
因为那是Chart.js滚动的方式 。
不幸的是，结果有点难看并且很难阅读。 条形图没有重叠，因此纯色是有益的。 雷达图不是这种情况，因为雷达图确实会重叠。 我们可以通过更新我们的opactity值适应这种backgroundColor和添加borderColor 。
{
label: 'apples',
backgroundColor: "rgba(179,11,198,.2)",
borderColor: "rgba(179,11,198,1)",
data: [12, 19, 3, 17, 6, 3, 7]
}
这样可以增加背景的清晰度，并使我们可视化重叠部分。
见笔3雷达图由SitePoint（ @SitePoint上） CodePen 。
要了解有关雷达图的更多信息， 请查看文档 。
这是此示例中的完整代码：
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
label: 'apples',
backgroundColor: "rgba(153,255,51,0.4)",
borderColor: "rgba(153,255,51,1)",
data: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'oranges',
backgroundColor: "rgba(255,153,0,0.4)",
borderColor: "rgba(255,153,0,1)",
data: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
极坐标图
极坐标图为每个数据点提供相等的径向空间。 具有较大值的线段从图形的中心进一步延伸。 这是我们的apples数据集的极坐标图。
见笔4.极坐标图由SitePoint（ @SitePoint上） CodePen 。
像往常一样，可以用一条线来指定这是一个极坐标图。 更改：
type: 'radar'
至：
type: 'polarArea'
但是，极区是我介绍的第一个图表，不能用来比较两个数据集。 前面的示例以不同的方式对比两个等长的数组，而极坐标图（以及饼图，将在下面进行介绍）仅可视化一组数字。
这是此示例的完整代码：
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
唯一的新代码是backgroundColor数组。 每种颜色都与相同索引的data元素匹配。
要了解有关极地面积图的更多信息， 请查看docs 。
饼图和甜甜圈图
您现在可能已经猜到这部分。 更改：
type: 'polarArea'
至：
type: 'pie'
type属性是Chart.js的关键。 还记得从折线图过渡到条形图和雷达图是多么容易吗？ 极坐标图，饼图和甜甜圈图同样可以互换。 有了这一更改，我们就可以从极坐标图转换为饼图。
请参阅CodePen上的Pen 5.通过SitePoint（ @SitePoint ） 创建的饼图 。
对于甜甜圈图：
type: 'pie'
至：
type: 'doughnut'
见笔6圆环图由SitePoint（ @SitePoint上） CodePen 。
要了解有关饼图和甜甜圈图的更多信息， 请查看docs 。
这是饼图的完整代码：
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
甜甜圈图具有一个有趣的属性，称为cutoutPercentage ，它指示中心孔的大小。 为了深入探讨这一点，我首先需要向您展示一些有关Chart.js的内容，为了帮助您快速了解基本图表类型，我们已将其忽略。
配置Chart.js
到目前为止，在每个示例中，我们都使用以下格式：
var myChart = new Chart(ctx, {
type: //chart type,
data: // chart data
});
但是还有第三个属性，叫做options 。 它正好位于data下方。
var myChart = new Chart(ctx, {
type: //chart type,
data: // chart data,
options: // chart options
});
现在，你已经熟悉了chart.js之基本面，它的时间来讨论一些与菱的招数options 。
职称
通过添加这组选项，可以很容易地向任何Chart.js图表添加标题。 原生标题很棒，但值得注意的是它们大多是静态的并且保持不变。 当我们尝试在一分钟内添加自定义事件时，这将很重要。
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
甜甜圈孔
cutoutPercentage属性是一个介于0到50之间的值。饼图只是一个cutoutPercentage为0的甜甜圈图。
options: {
cutoutPercentage: 10,
}
堆积条形图
如果您希望堆叠条形图，只需将以下选项集添加到条形图代码中：
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
每种图表类型都有很多可供您选择的选项。 我鼓励你这样做。
处理事件
如前所述，单击图例将切换与该特定图例关联的数据集。 让我们用我们自己的功能来增强它：
var original = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function(e, legendItem) {
// Insert your custom functionality here
original.call(this, e, legendItem);
};
此代码将对图例项目的onClick函数的引用保存到名为original的变量中。 然后使用我们自己的自定义版本覆盖此功能。 我们传递给它的e参数是对导致函数触发的click事件的引用， legendItem参数是对所单击的图例的引用。 添加完自己的代码后，我们将调用原始函数，以指定this值并传递期望的参数。 这将导致单击图例（切换数据集）的默认操作被执行。
换句话说，我们现在可以将所需的任何功能打包在onClick()调用之上，只要我们将其放在original.call()之上即可。
一个具体的例子
让我们扩展前面的代码，以便当用户单击图例时，图表底部的标题会自动更新。
我们仅更改标题，但是您可以添加所需的任何功能。 例如，仪表板可能包含每日apples和oranges值的列。 仪表板还可以利用自定义回调的功能根据图表的状态动态更新。 使用Chart.js轻松创建交互式数据。
这是代码
var labels = {
"apples": true,
"oranges": true
};
var caption = document.getElementById("caption");
var update_caption = function(legend) {
labels[legend.text] = legend.hidden;
var selected = Object.keys(labels).filter(function(key) {
return labels[key];
});
var text = selected.length ? selected.join(" & ") : "nothing";
caption.innerHTML = "The above chart displays " + text;
};
如您所见，我们正在使用对象文字来跟踪图例的状态。 我们还利用了legend.text和legend.hidden属性来更新其状态。 filter函数将返回任何值为true的对象键，这些键用于构建标题。
请参见笔7。CodePen上的SitePoint （ @SitePoint ） 具有自定义onClick（）的条形图 。
Chart.js 2.0与1.0
本文使用了Chart.js 2.0语法。 Chart.js 2.0在2016年相对较新。2.0和1.0之间最明显的区别是如何声明图表。
1.0
var LineChartDemo = new Chart(ctx).Line(
//data here,
//options here
);
2.0
var myChart = new Chart(ctx, {
type: 'line',
data: //data here,
options: //options here
}
1.0版专注于使用函数链来创建特定类型的图表，然后传递数据和选项。 2.0版通过允许用户创建一个通用图表对象然后传递类型以及数据和选项来对此进行切换。 第二种方法尽可能地模块化和个性化，从而更符合Chart.js的理念。 值得注意的是，Chart.js 2.0向后兼容，但仍接受1.0语法。
Chart.js 2.0的另一个主要功能是移动支持。 图表现在可以缩放以适合移动屏幕并处理移动浏览器上的触摸事件。 随着当前移动设备的激增，这是2016年网站的必备功能。
我们在本指南中使用的2.0新增功能是title 。 图表现在具有集成的标题，可以与其所附的图表配合使用。
更新的完整列表可以在2.0.0发行说明中找到 。
结论
Chart.js非常适合简单图表的快速原型制作。 共有八种主要的图表类型，其中包括： line ， bar ， radar ， polarArea ， pie和doughnut 。 这些不同的图表涵盖了可视化数据的最常用方法，这意味着Chart.js可能是您下一个项目所需的唯一图形库。
如果您想了解有关Chart.js的更多信息，我强烈建议您在Chart.js网站上找到这些文档 。 如果您有任何疑问或意见，欢迎在下面听到。
From: https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
