四、绘制折线图
Abstract
在前一章中，您构建了一个 HTML 表作为结构化数据的样本，并用 JavaScript 开发了解析器来将数据提取到数组中。在本章中，您将使用 JavaScript 构建一个折线图，作为第 3 章表格中数据的一种可能的可视化方式。
在前一章中，您构建了一个 HTML 表作为结构化数据的样本，并用 JavaScript 开发了解析器来将数据提取到数组中。在本章中，您将使用 JavaScript 构建一个折线图，作为第 3 章中表格数据的一种可能的可视化方式。
在开始将数据转换为图形元素以制作折线图之前，您需要一个使用它的地方。因此，我将从介绍画布开始这一章。您将看到这是什么以及如何实现它，最后，您将把它集成到您的 web 页面中。
一旦你理解了画布是什么，你就可以开始实现构成折线图的元素。您要处理的第一个组件是轴，根据要表示的数据，您将在轴上应用记号和标签，然后是网格。背景。最后，您将通过绘制代表从 HTML 表中读取的数据的线条来完成折线图。
本章的最后一部分解释了如何在折线图中添加其他不太重要但非常重要的组件:标题和图例。
定义画布
HTML5 技术允许你在你的网站上定义一个叫做 canvas 的绘图区域。这个区域被定义为一个真实的标签元素，它根据标签<canvas>插入的位置在一个确定的位置占据一个定义的区域。
在前一章中，您首先开发了一个包含一些数据的 HTML 表，然后开发了一组解析器，以便可以通过数组访问这些数据。从您离开的地方继续，现在添加<canvas>元素，然后您可以在其上绘制折线图的所有元素。
因此，让我们在<body>部分插入<canvas >元素，就在你想要为你的图表保留一个区域的地方(见清单 4-1)。然后，您必须在与表格相关的所有其他标记之前插入以下标记，以便在加载页面时，您的图表显示在表格上方。
清单 4-1。ch4_01.html
<canvas id="myCanvas" width="500" height="400"> </canvas>
...
在这些标记语句中，您还指定了绘图区域的大小。为了避免绘图与表格重叠，您可以将 HTML 表格移动到画布下方。因此，在层叠样式表(CSS)样式中，您需要定义表格的新位置，如清单 4-2 所示。top属性定义了从网页上边缘的距离，而left属性定义了表格从左边缘的距离。
清单 4-2。ch4_01.html
版权属于：月萌API www.moonapi.com，转载请注明出处
