chart.js折线图_如何使用Chart.js创建折线图

chart.js折线图

在这本有关使用Chart.js进行数据设计的课程的视频教程中，您将通过使用Chart.js框架在网格上绘制一系列点来创建简单的折线图。 完成此操作后，我们将观察Chart.js框架为您完成其余的繁重工作。

您可以在此处找到源代码：

• 起跑笔
• 成品笔

如何使用Chart.js创建折线图

设置画布

首先打开本教程的启动CodePen ，然后单击Fork按钮以创建它的新副本。 这将带我们到一个新的URL，在该URL中，我们拥有自己的新副本，并对其应用了相同的设置。

当使用Chart.js框架创建图表时，我们将需要一个canvas元素。 Chart JS库依赖于canvas元素。 因此，在HTML部分中创建一个canvas元素，为其指定一个line-chart ID，然后关闭该canvas元素。

<canvas id="line-chart"></canvas>

我们不必担心该画布元素的样式或大小，因为即使我们尝试使用CSS或在HTML元素本身上使用属性来调整其大小，也无法正常工作。 Chart.js的工作方式只是将画布的大小调整为其父对象的大小，因此无论如何它仍将占据整个屏幕。 稍后，我们将研究如何解决该问题，但是现在，让我们进入JavaScript并创建图表本身。

使用JavaScript创建上下文

JavaScript中需要的第一件事是图表的上下文，这基本上只是一种表达我们要应用图表的元素的奇特方式，这就是我们的canvas对象。

因此，我们将创建一个名为context的变量，简称ctx ，并将其设置为与该canvas对象相等。 我们将使用jQuery指向该画布对象。 因此，我将使用美元符号和括号，并在括号内使用一组引号，在引号内使用该画布对象CSS选择器。 我们要指向该对象的ID，因此我们将键入# ，然后输入ID（即line-chart ，然后在该语句的末尾添加一个分号。

var ctx = $("#line-chart");

添加JavaScript代码以绘制图表

现在，我们已经完成了这一步，只需要再一行代码即可创建图表。 现在，它将是一个复杂的代码行，实际上最终将看起来像是多行代码，但这只是一条JavaScript语句。 这里是：

现在，让我逐步引导您完成操作并解释发生的情况。

我们首先创建一个名为lineChart的变量，然后使用Chart.js语法，将其设置为new Chart 。

我们添加开括号和闭括号，在这些括号内，我们需要两件事：

1. 我们将图表应用到的对象，或者我们创建并存储在名为ctx的变量中的ctx 。
2. 包含该特定图表的所有数据和样式的对象。

我们可以将第二个对象视为一组属性值对。 我们需要的第一个属性是指定这是什么类型的图表。 该属性名称为type 。 然后我们添加'line' ，这告诉Chart.js这是我们正在创建的折线图。

然后，我们将输入逗号，然后转到下一行。 接下来，我们需要的是进入该图表的所有数据。 因此，我们将输入单词data 。 然后，此数据属性将成为一个对象。 因此，我们将使用大括号创建该对象，并且在该对象内部，我们将具有许多其他属性值对。

在这个新对象中，我们需要做一些事情。

我们需要的第一件事是所有要沿着图表底部移动的标签。 假设我们想要一个图表，该图表绘制出一年中某种产品的价格或一年中某只股票的股价。 因此，对于我们的标签，我们将每年的每个月都有一次。

接下来我们需要的是一组数据集。 单个图表可以有多个数据集，但是现在我们只需要担心一个数据集。 因此，此属性的名称为datasets ，它将是一个对象数组。

当我们使用方括号创建数组时，我们可以看到图表已经显示出来。

我们在该图表上还没有任何数据，因此它不知道如何缩放图表左侧的所有数字，但是一旦我们开始插入一些值，它的外观就会改变。

添加值时，您确实需要注意您在做什么。 我们需要确保我们的datasets元素以数组开头，并且在该数组内部有一个对象。

在该对象内部，我们将首先获得2015的标签。 然后，我们在这里仅有的另一件事是值列表，该列表包含在另一个名为data属性中。 对于该示例，这些基本上只是12个随机数。

观看Chart.js绘制图表

一旦粘贴了这些数字，我们就会看到图表栩栩如生。

所以现在我们看到，首先，我们的左轴已更改为与我们输入的数据匹配。 我们还可以看到在一年中的单个数据集，而我们为2015年添加的标签位于顶部。

这就是使用Chart.js创建简单折线图的方式。

观看完整课程

数据设计（或“数据可视化”）是一种以易于使用和易于理解的方式显示信息的艺术。 在整个课程中，使用Chart.js进行数据设计 ，您将学习如何使用Chart.js动态显示具有交互式和引人注目的图表的数据。

您将进一步使用此初始折线图，例如通过应用不同的样式并添加多个数据集。 然后，您将学习如何创建条形图，饼图甚至动画图。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-a-simple-line-chart-with-chartjs--cms-28129

chart.js折线图