如何用Chart.js在JavaScript中制作一个图表？

方石剑
643 阅读6分钟

如何用Chart.js在JavaScript中制作图表？

本文是一个关于用chart.js在JavaScript中制作图表的详细教程。

有很多JavaScript库用于绘制不同的图表，从线形图、条形图、图表等等。

如果你想学习如何用JavaScript在网站上动态地显示数据，Chart.js是你可以测试的库之一。

React是最好的JavaScript框架之一，也提供了一套很酷的图表库，通过它你可以创建一个很酷的网络和混合应用程序的界面。

使用Chart.js开始开发数据可视化的步骤是什么？

请在本文中了解如何做到这一点。

什么是Chart.js？

Chart.js是一个开源的数据可视化的JavaScript库，可以绘制基于HTML的图表。

目前，它能够支持八种可以进行动画的交互式图表。要使用chart.js创建一个基于HTML的图表，你需要一个HTML画布，以便显示它。

该库可以使用一系列的数据集和额外的自定义参数，如边框颜色、背景颜色等等。

其中的一个数据集被称为标签的数据集，是X轴的数值。另一个是数字的集合，通常沿着Y轴落下。

也有必要在图表对象内部定义图表类型，以确保库能够确定要画什么图。

用Chart.js在JavaScript中创建图表

正如我们之前提到的，你可以用chart.js制作各种类型的图表。

在本教程中，我们将从条形图和线形图开始。一旦你理解了这些图表类型的概念，你将拥有绘制其他可用图表所需的信息和工具。

要开始使用chart.js，请创建所需的文件。在本指南中，这些文件的名称将是chart.html、plot.js和index.css。你可以使用任何命名规则来命名你的文件。

然后，复制并粘贴以下代码到你的HTML文档的标题区域。这将创建一个指向Chart.js内容交付网络（CDN）的链接。

在chart.html上

<head>
 <script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
 </script>
 </head>

创建HTML画布来显示你的图表。给出你的图表的ID。此外，连接位于头部的CSS（index.css）文件，并链接到主体部分的JavaScript（plot.js）文件。

HTML文件的格式如下：

<!DOCTYPE HTML>
<html>
 <head>
 <title>
 Chart
 </title>
 <link rel="stylesheet" href="index.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
 </head>
 <body>
 <header>
 <h1>
 Charts
 </h1>
 </header>
 <canvas id="plots" style="width:100%;max-width:700px"></canvas>
<script src="plot.js">
</script>
</body>
</htm/>

在你的CSS中

body{
 background-color:#383735;
}
h1{
 color:#e9f0e9;
 margin-left:43%;
}
#plots{
 margin:auto;
 background-color: #2e2d2d;
}

上面显示的CSS样式并不是标准的。你可以根据你的DOM的结构，按照你的偏好来设计它。当你的HTML或CSS文件完成后，你就可以使用JavaScript创建你的图表了。

折线图

对于使用chart.js创建的线形图，你要把你的图表类型改为线形。这就告诉库如何绘制折线图。

为了显示这一点，在JavaScript文件中：

// Get the HTML canvas by its id 
plots = document.getElementById("plots");
<strong>// Example datasets for X and Y-axesstrong> 
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; <strong>//Stays on the X-axisstrong> 
var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis 
// Create an instance of Chart object:
new Chart(plots, {
 type: 'line', <strong>//Declare the chart typestrong> 
 data: {
 labels: months, <strong>//X-axis datastrong> 
 datasets: [{
 data: traffic, <strong>//Y-axis datastrong> 
 backgroundColor: '#5e440f',
 borderColor: 'white',
 fill: false, //Fills the curve under the line with the background color. It's true by default 
 }]
 },
});

输出

随意改变你的填充值为真，使用额外的数据，或修改颜色来观察发生了什么。

正如你所看到的，在最顶端附近有一个额外的图例框。你可以把它从一个选项参数中拿出来。

它的选项参数也可以用来做除删除或添加图例以外的其他调整。例如，你可以应用它来使一个轴从零开始。

要定义选项参数。这就是图表部分在JavaScript文件中的样子：

// Create an instance of Chart object:
new Chart(plots, {
 type: 'line', <strong>//Declare the chart typestrong> 
 data: {
 labels: months, <strong>//X-axis datastrong> 
 datasets: [{
 data: traffic, <strong>//Y-axis datastrong> 
 backgroundColor: '#5e440f', <strong>//Color of the dotsstrong> 
 borderColor: 'white', <strong>//Line colorstrong> 
 fill: false, //Fills the curve under the line with the background color. It's true by default 
 }]
 },
<strong> //Specify custom options:strong> 
 options:{
 legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
 //Specify settings for the scales. To make the Y-axis start from zero, for instance:
 scales:{
 yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers. 
 }
 } 
});

输出

你也可以为每个点的背景选择不同的颜色。不过，这种方式的背景颜色的变化通常对条形图更好。

使用ChartJS创建一个条形图

这是唯一一次你必须将图表类型改为条形的时候。没有必要改变颜色选项，因为条形图将自动继承其背景颜色：

// Create an instance of Chart object:
new Chart(plots, {
 type: 'bar', <strong>//Declare the chart typestrong> 
 data: {
 labels: months, <strong>//X-axis datastrong> 
 datasets: [{
 data: traffic, <strong>//Y-axis datastrong> 
 backgroundColor: '#3bf70c', <strong>//Color of the barsstrong> 
 }]
 },
 options:{
 legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
 }
});

输出

随意将Y轴设置为从零开始或任何其他数值，就像你对线图所做的那样。

如果要为每个条形图使用不同的颜色，你必须向backgroundColor参数传递一个与你的数据中的项目数量相匹配的颜色阵列：

// Create an instance of Chart object:
new Chart(plots, {
 type: 'bar', <strong>//Declare the chart typestrong> 
 data: {
 labels: months, <strong>//X-axis datastrong> 
 datasets: [{
 data: traffic, <strong>//Y-axis datastrong> 
 <strong>//Color of each barstrong>:
 backgroundColor: [
 "rgba(196, 190, 183)",
 "rgba(21, 227, 235)",
 "rgba(7, 150, 245)",
 "rgba(240, 5, 252)",
 "rgba(252, 5, 79)",
 "rgb(0,12,255)",
 "rgb(17, 252, 5)"],
 }]
 },
 options:{
 legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
 }
});

输出

使用Chart.js创建一个饼图

要创建一个饼图，请将图表的类型切换为饼图。也可以使图例的显示为真，以确定饼的每个部分是什么：

// Create an instance of Chart object:
new Chart(plots, {
 type: 'pie', //Declare the chart type
 data: {
 labels: months, //Defines each segment
 datasets: [{
 data: traffic, //Determines segment size
 //Color of each segment
 backgroundColor: [
 "rgba(196, 190, 183)",
 "rgba(21, 227, 235)",
 "rgba(7, 150, 245)",
 "rgba(240, 5, 252)",
 "rgba(252, 5, 79)",
 "rgb(0,12,255)",
 "rgb(17, 252, 5)"],
 }]
 },
 options:{
 legend: {display: true}, //This is true by default.
 
 }
 
});

输出

就像你在前面的例子中做的那样，通过改变图表的种类来尝试不同的图表。

然而，有几种chart.js图表类型是被支持的。chart.js图表类型，你可以使用上面的代码约定：

  • 条形图
  • 雷达式
  • 线形
  • 甜甜圈
  • 饼形
  • 泡沫
  • 散点
  • 极地面积

继续前进

尽管你在本教程中只熟悉了饼图、线图和条形图，但使用chart.js绘制其他图表的代码模式是基于相同的原则。你也可以自由地尝试使用其他图表。

avatar
文章
阅读
粉丝