网上有许多免费的 JavaScript 库，网页设计人员或开发人员可以使用它们来精美地显示数据。然后，您无需在 Photoshop 或 Illustrator 中创建图形即可呈现数据。
使用 Chart.js 进行数据可视化
Chart.js 库是优秀的在线 JavaScript 库之一，它使用 HTML5 canvas 元素构建数据来绘制图形和图表，并附有文档。
为了查看 Chart.js 的实际效果，我们将使用 Web 编程语言作为标签及其虚构数据来构建以下图表：
- 折线图
- 条形图
- 雷达图
- 极地面积图
- 饼形图
- 圆环图
完成本教程所需的资源：
- Chart.js库
- 时间和耐心
第一步：下载
首先，我们需要将 Chart.min.js 从解压缩的文件夹中复制到我们的 js 文件夹或您的首选目录中。
第二步：配置
接下来我们需要做的是创建一个新的 HTML 文件并添加以下代码。这将包括 HTML5 文档类型，然后是 CSS 文件目录，最后是我们的 Chart.js 库文件目录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visualize Data Beautifully Using JS Charts</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
</body>
</html>第三步：绘制
1、绘制折线图
要绘制折线图，我们需要首先在 HTML 文件的正文部分创建一个 HTML5 画布元素。
<canvas id="canvas" height="450" width="600"></canvas>接下来，我们需要创建一个脚本来初始化图表类（在本例中，我使用myLineChart），然后检索我们要在其中绘制图表的画布的 2D 上下文。复制结束正文标记之前的代码。
var myLineChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(LineChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"});注意：您还可以使用“图表”选项在每个图表上添加一些所需的样式，例如文本颜色和字体大小。
在上面的示例中，我使用scaleFontSize和scaleFontColor来更改数据的字体大小和文本颜色。您可以查看Chart.js 文档以查看每个图表的更多可用图表选项。
对于我们的数据结构，我们将初始化一个对象（在本例中我使用LineChart），其中包含折线图的所有标签。折线图的数据将被分解为一组数据集。您应该定义每个数据集的值，例如填充颜色、描边颜色、点颜色、点描边颜色和数据本身。
您将得到类似下图的结果：
var LineChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [10, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 68, 40, 19, 96]
}]
}
2、绘制柱形图
要绘制柱形图，我们需要首先在 HTML 文件的正文部分创建一个 HTML5 画布元素。
<canvas id="canvas" height="450" width="600"></canvas>接下来，我们将创建一个脚本来表示条形图类（在本示例中，我使用myBarChart），然后检索画布的 2D 上下文。复制结束正文标记之前的代码。
var myBarChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(BarChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"});柱形图与折线图具有几乎相同的数据结构。让我们使用一个对象（在本例中，我使用BarChart）来保存条形图的标签和值。如您所见，我们显示的数据与前面的折线图示例相同。
var BarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [13, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [28, 68, 40, 19, 96]
}]
}您将得到类似下图的结果：
3、绘制雷达图
接下来，我们来绘制雷达图。因此，首先将 HTML5 画布元素代码放在我们的 HTML 文件中。
<canvas id="canvas" height="450" width="610"></canvas>然后，我们将创建一个脚本来初始化雷达图类（在本例中，我使用myRadarChart），然后检索画布的 2D 上下文。将下面的代码放在结束正文标记之前。
var myRadarChart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(RadarChart, {pointLabelFontSize : 13, pointLabelFontColor : "#ffa45e"});对于雷达图，我们需要为图表的每个点显示一个标签。这将包括一个字符串数组，然后将其显示在图表周围。为此，我们再次实例化一个对象（在本例中我使用RadarChart）作为雷达图标签和值的容器。
var RadarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [10, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96]
}]
}您将得到类似下图的结果：
4、绘制极地面积图
要绘制极地面积图，我们需要在 HTML 文件中添加 HTML5 画布元素代码。
<canvas id="canvas" height="400" width="610"></canvas>接下来，让我们为对象创建一个脚本（在本例中，我使用 myPolarAreaChart），然后检索画布的 2D 上下文。您可以在结束正文标记之前复制以下代码。
var myPolarAreaChart = new Chart(document.getElementById("canvas").getContext("2d")).PolarArea(PolarChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"});极地面积图与饼图几乎相同；但是，每个线段具有相同的角度，并且半径根据值的不同而不同。
让我们通过首先实例化对象（在本例中，我使用PolarChart）来保存标签和值来创建 Polar 面积图的数据结构。value 属性应该是数字，而 color 属性应该是字符串。
var PolarChart = [{
value: Math.random(),
color: "#fac59c"
}, {
value: Math.random(),
color: "#c9fadd"
}, {
value: Math.random(),
color: "#a2efff"
}, {
value: Math.random(),
color: "#e6d1ff"
}, {
value: Math.random(),
color: "#ffd1f9"
}, {
value: Math.random(),
color: "#ffd1d1"
}];您将得到类似下图的结果：
5、绘制饼图
接下来，我们来画一个饼图。首先，我们需要 HTML5 canvas 元素。
<canvas id="canvas" height="450" width="610"></canvas>然后，让我们创建对象（在本例中，我使用myPieChart），然后检索画布的 2D 上下文。将以下代码复制到结束正文标记之前。
var myPieChart = new Chart(document.getElementById("canvas").getContext("2d")).Pie(PieChart);对于饼图，我们需要传入一个带有值（数字）和颜色属性的对象数组。那么让我们这样做吧。复制下面的代码。
var PieChart = [{
value: 40,
color: "#fcc79e"
}, {
value: 30,
color: "#beefd2"
}, {
value: 90,
color: "#ffddfb"
}];您将得到类似下图的结果：
6、绘制圆环图
最后，我们将绘制一个圆环图。我们需要首先在 HTML 文件的正文部分创建一个 HTML5 画布元素。
<canvas id="canvas" height="450" width="610"></canvas>接下来，我们需要获取画布的上下文并实例化图表。
var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart);最后，让我们创建数据。对于圆环图，就像饼图一样，我们需要传入一个具有值和颜色属性的对象数组。
var DoughnutChart = [{
value: 60,
color: "#fcc79e"
}, {
value: 30,
color: "#beefd2"
}, {
value: 50,
color: "#ffddfb"
}, {
value: 120,
color: "#cdecff"
}, {
value: 90,
color: "#fff5bc"
}];您将得到类似下图的结果：
Chart.js 是一个很棒的 JavaScript 库，可以让您以富有创意的方式创建图表。本教程将引导您完成如何使用这个很酷的库的步骤。然而，使用 Chart.js 也有一些缺点，比如它没有工具提示，也没有交互性。
据说这个 JavaScript 库还有很长的路要走，最终会被不同的开发人员改进。