用Chart.js在JavaScript中创建图表的指南

方石剑
1,936 阅读11分钟

简介

数据可以帮助我们讲述有说服力的故事，数据可视化是用图表、图形等图形元素来表示信息和数据，有一些库可以帮助我们用相对较少的工作产生漂亮的结果，Chart.js就是其中之一。

在本指南中，我们将研究如何使用Chart.js在JavaScript中构建图表，以及Chart.js提供的大量自定义和样式，使我们能够制作出漂亮的图表。

入门

Chart.js是一个流行的由社区维护的开源数据可视化框架。它使我们能够生成响应式条形图、饼图、线图、甜甜圈图、散点图等。我们所要做的就是简单地指出你想在页面的什么地方显示图表，你想绘制什么样的图表，然后向Chart.js提供数据、标签和其他设置。在这之后，这个库就完成了所有繁重的工作。

安装

为了开始使用Chart.js，我们必须首先安装它，因为它是一个第三方库。Chart.js可以通过npm、GitHub发布或Chart.js CDN来安装，这是最快速、最简单的方法。

在本指南中，我们将利用Chart.js的CDN。你可以通过获取最新的CDN链接并将其添加到你的项目中来实现。

注意请使用末尾带有Chart.min.js 的URL，因为这是最小化的版本。

截至本文撰写时，最新的版本是3.7.1。你所要做的就是在你的HTML文件的head元素中加入以下内容。

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

一旦成功完成，我们就可以使用这个库了。

用Chart.JS创建图表

在本指南中，我们将创建几种图表，根据它们目前在GitHub上拥有的星星数量，重点介绍最流行的JavaScript框架。以下是我们将使用的信息。

JavaScript框架GitHub星级
React185,134
Vue195,514
Angular80,460
视觉化57,022
Ember.js22,165
Backbone.js27,862

创建一个Canvas来渲染图表

第一步是在我们的HTML中提供一个渲染图表的位置。Chart.js 依赖于 HTML5 Canvas 标签（用于绘制线条、圆圈等）的可用性来生成和渲染图表。关于Canvas API的更多信息可以在这里找到。

我们所要做的就是在body 标签中构建canvas 标签，并提供一个ID ，我们需要调用获取元素并在JavaScript中引用我们指定的图表元素。

<canvas id="myChart" width="1000" height="600"></canvas>

注意我们可以随心所欲地称呼ID ，然而建议我们选择一个描述性的名字，代表我们想要生成的图表类型。如果我们要在一个页面上添加许多图表，重要的是我们要确保每个ID 是不同的（例如，我们可以给我们的图表起更具体的名字，如studentsChart 或productChart ，等等）。

下面是我们的HTML文件现在应该是的样子。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
		<title>Programming Lang. Chart</title>
	</head>
	<body>
		<canvas id="myChart" width="1000" height="600"></canvas>

		<script src="./App.js"></script>
	</body>
</html>

准备和组织我们的数据

我们必须保存之前提供的信息（框架和星星）。对我们来说，最方便的格式是将其保存在一个对象中，其中的键代表框架，值代表星星。在我们的App.js ，让我们定义我们的data 。

const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

创建一个条形图

让我们从核心逻辑开始；我们将看到如何制作一个条形图，以及以后如何通过轻松改变我们的参数来制作额外的图表。Chart.js的伟大之处在于，一旦你创建了一个Chart 对象--要改变它，你只需改变type 属性，其他的都保持原样即可

第一步是将HTML中的画布元素以IDmyChart ，并将其分配给一个上下文变量--通常命名为ctx 。

const ctx = document.getElementById('myChart').getContext('2d');

注意我们可以随心所欲地命名该变量；ctx 只是大多数开发人员喜欢的一种模式，我们将使用这种模式。.getContext('2d') 是一种可选的方法，允许我们访问canvas标签的2D绘图功能。

要创建一个Chart 对象，我们调用new Chart() 构造函数，它接受两个参数。

  • ctx上下文对象：指的是我们要绘制的画布元素。
  • 配置对象：使我们能够设置图表类型、数据和图表参数。
const myChart = new Chart(ctx, {});

我们将使用配置对象来帮助我们创建我们的柱状图。正如我们前面所说，配置对象让我们指定。

  • 图表类型我们希望生成的图表的种类。在这种情况下，我们要制作一个条形图。如果我们想要一个饼图或折线图，我们可以提供type: 'pie' 或type: 'line' 。
  • 图表数据将用于创建图表的标签和值。
  • 图表选项用于自定义图表的配置选择，如调整图例的位置、启用/禁用响应性、控制样式等。

让我们来设置一个骨架配置对象。

{
  type: 'bar',
  data: {},
  options: {} // this is optional
}

然后这个对象可以被传递到图表实例化中。让我们把图表数据添加到type 。

const myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: Object.keys(data),
		datasets: [
			{
				label: 'Number of GitHub Stars',
				data: Object.values(data),
			},
		],
	},
});

由于我们处理的是一个对象--我们可以通过Object.keys() 和Object.values() 方法提取其键和值。另外，你也可以在单独的数组中采购标签和值!

了解数据属性

标签和数据集是数据属性对象的两个属性。标签代表一个将在X轴上显示的组件数组。

Bar Chart showing labels

而，datasets ，取一个对象的数组，它有两个基本属性。

  • label:一个字符串，通常显示在图表的顶部或悬停条形图时，如下图所示。

Bar Chart showing label in datser

  • data:一个数值数组，显示在Y轴上，反映了我们例子中的GitHub明星数。

Bar Chart showing data

**注意：**你可以有很多数据集，每个数据集都有自己独特的 "suptitle" (label)和data 。如果你绘制了几个数据集，用不同的颜色来标明区别是有帮助的。我们稍后会介绍这个用例。

总之，要绘制柱状图，我们要准备好画布/背景，并用我们的数据和标签初始化一个Chart() 。

const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: frameworks,
		datasets: [
			{
				label: 'Number of GitHub Stars',
				data: stars,
			},
		],
	},
});

当你刷新你的浏览器时--页面应该包含一些类似的内容。

Bar Chart without styling

水平条形图

要将条形图翻转为水平图--你要在options 对象中设置indexAxis 属性，也就是y 。

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    ...
  },
  options: {
    indexAxis: 'y',
  }
});

Horizontal Bar Chart

**注意：**在以前的Chart.js版本中，你可以用type:horizontalBar 替换type:bar ，不过，这已经被废弃了。

设计柱状图的样式

在这一点上，我们已经成功地创建了一个条形图!不过，数据可视化是关于讲故事的，而不仅仅是数据。我们通常希望让图表在视觉上更吸引人此外，不对图表进行造型设计，不仅会使其变得沉闷--而且无法阅读。例如，如果一个饼图的所有楔子都是相同的颜色，你就无法真正区分不同的等级，除非你给每个楔子加上边框。

我们可以通过以下方式改变其中的一些选项。backgroundColor,borderColor 和borderWidth 。

backgroundColor - 取一个十六进制或RGBA颜色值（字符串）的数组，用于给图表的条形图着色。这也可以用一种颜色来完成，因为它将被应用于所有的条形图。

backgroundColor: 'red' // Setting all bars to red

// Or

backgroundColor: [
  'rgba(255, 99, 132, 0.2)',  // Bar 1
  'rgba(54, 162, 235, 0.2)',  // Bar 2
  'rgba(255, 206, 86, 0.2)',  // Bar 3
  'rgba(75, 192, 192, 0.2)',  // Bar 4
  'rgba(153, 102, 255, 0.2)', // Bar 5
  'rgba(255, 159, 64, 0.2)'   // Bar 6
],

borderWidth - 它接受一个Integer或float值，并指定一个边界应该有多宽。

borderWidth: 2

borderColor - 与 属性相同，它接受一个颜色值字符串的数组。它将对条形图的边框进行着色。backgroundColor

borderColor: 'green' // Setting all borders to green

// Or

borderColor: [
  'rgba(255, 99, 132, 1)',    // Bar 1
  'rgba(54, 162, 235, 1)',    // Bar 2
  'rgba(255, 206, 86, 1)',    // Bar 3
  'rgba(75, 192, 192, 1)',    // Bar 4
  'rgba(153, 102, 255, 1)',   // Bar 5
  'rgba(255, 159, 64, 1)'     // Bar 6
],

注意所有这些属性和它们的值都是data 对象的一部分，就在datasets 。

将这些结合在一起，你可以制作一个漂亮的风格化的条形图，如。

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(data),
        datasets: [{
            label: 'Number of GitHub Stars',
            data: Object.values(data),
        }, ],
    },
    options: {
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',  // Bar 1
            'rgba(54, 162, 235, 0.2)',  // Bar 2
            'rgba(255, 206, 86, 0.2)',  // Bar 3
            'rgba(75, 192, 192, 0.2)',  // Bar 4
            'rgba(153, 102, 255, 0.2)', // Bar 5
            'rgba(255, 159, 64, 0.2)'   // Bar 6
        ],
        borderWidth: 2,
        borderColor: 'black'
    }
});

如何控制图表的宽度和高度

到目前为止，如果你一直在浏览器中查看图表，你可能已经注意到，浏览器正在全屏显示图表，并没有尊重我们之前在canvas元素上设置的宽度和高度。

<canvas id="myChart" width="800" height="400"></canvas>

为了解决这个问题，我们必须通过在选项对象中传递一些选项来为我们的柱状图实例添加配置。这些是选项。

  • maintainAspectRation：这被设置为false ，以尊重我们先前添加到画布上的高度。这意味着我的图表将是400像素高。
  • responsive:这被设置为false ，以获得对画布宽度的完全控制。
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    // Data...
  },
  options: {
    // ... Other options
    maintainAspectRatio: false,
    responsive: false
  }
});

解释一下如何使用CSS来实现这一点会很有帮助，这是另一种控制图表宽度和高度的方法。这个选项需要额外的标记，但更加灵活，因为我们的图表仍然是响应式的

注意我们必须删除options 对象，以及canvas标签的height 和width 。

现在让我们把canvas标签包在一个div ，我们将用它来为图表设置样式。

<div class="container">
	<canvas id="myChart"></canvas>
</div>

在我们的CSS中，我们需要做的就是应用一个max-width ，并将其margin 设置为0 auto ，这样它就可以调整大小并出现在中间。

.container {
	max-width: 800px;
	margin: 0 auto;
}

当你现在重新加载你的浏览器时，你会发现它是有反应的，而且它也尊重了max-width 的设置!

用Chart.js绘制折线图、甜甜圈图、极区图和雷达图

创建图表非常简单，我们所要做的就是把类型从type: "bar" 改为你想要的具体类型。这可以是pie,horizontalBar,line,doughnut,radar,polarArea,scatter 等。

Other charts that can be created with Chart.js

更多样式

现在让我们来看看可以用Chart.js轻松完成的更多造型选项。

全局样式/配置

Chart.js允许我们声明一些全局配置，定义在Chart.defaults 。

让我们用它来全局地调整我们聊天的font-family、font-size、font-style和font-weight，所以它适用于图表上的每个文本。这些选项可以在Chart.defaults.font中找到。

Chart.defaults.font.size = 10;
Chart.defaults.font.weight = 'bold';
Chart.defaults.font.family = 'Lato';
Chart.defaults.font.style = 'italic';

注意全局字体设置只适用于个别图表的配置中没有包含更多具体选项的情况。

例如，在这个图表中，除了标题文本有一个特定的尺寸外，其他文本的字体大小为16px。

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
	type: 'line',
	data: data,
	options: {
		plugins: {
			title: {
				text: 'Popular JavaScript Frameworks',
				font: {
					size: 25,
				},
			},
		},
	},
});

注意我们也可以通过使用Chart.defaults.color ，为我们聊天中的所有文本添加全局颜色。

设置标题

可以在options 对象内添加一个plugin 来指定标题。

options: {
  ...
  plugins: {
    title: {
      display: true,
      text: 'Popular JavaScript Frameworks',
      font: {
        size: 25
      }
    },
  }
}

注意这可以接受更多的样式，如位置、填充、字体等。更多的细节在Chart.js的官方文档中。

添加图例

图例是帮助用户将类和它们的标签与它们的颜色联系起来的一个好方法。图例也可以使用Chart.defaults.plugins.legend ，在你有多个图表而不想重复相同的代码的情况下，全局地声明/样式。

plugins: {
  ...
  legend: {
    display: true,
    position: 'right'
  }
}

注意除了前面提到的那些图表外，对于其他图表，最好将display 设置为false 。 Setting the legent content

总结

到目前为止，在本教程中，我们已经能够学习如何利用Chart.js来创建各种形式的图表，还可以看到我们如何应用样式，如果你不了解它是如何正常工作的，就会变得非常棘手。

avatar
文章
阅读
粉丝