Highcharts使用HTML表中的数据创建交互式图表教程

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

在本文中，我将向您展示一个简单的方法，说明如何使用HTML表中的数据创建交互式图表。

多亏了Highcharts数据模块，很容易和直接装载一个HTML表作为数据源。

下面的演示将1935年至2020年的日本人口统计数据可视化。数据是从HTML表中获取的：

Highcharts使用HTML表中的数据创建交互式图表教程

让我们看看如何做

创建此交互式图表有两个简单的步骤：
1. HTML源代码

第一步是复制表的HTML源代码以使其可视化。我使用了日本总人口1935年至2020年从日本维基百科网页的人口。

在下面的图片中，您可以看到我的访问方式，然后使用开发者工具从Google chrome复制HTML代码：

Highcharts使用HTML表中的数据创建交互式图表教程

如果您使用的是其他浏览器，请随时检查如何相应地获取此数据。

重要的是要注意，在将数据输入Highcharts之前，数据是干净的。在这种情况下，我从数据中删除了逗号，因此结果是68254，而不是69254（如表中所示）。请随意应用任何方法来清理您认为合适的数据。
此阶段的最后一步是将HTML代码粘贴到HTML部分中。在这种情况下，当我使用Codepen时，我会将表格粘贴到HTML部分下。

2.图表配置

现在已经准备好数据，让我们设置Highcharts从表中获取数据并对其进行可视化。
第一步是将表链接到JS代码，为此，我向表添加了HTML id属性：id="datatable"

然后，我通过该data功能将表格作为数据源提供给Highcharts ：

data: {: { table: "datatable",: "datatable", ...... },},

该表具有许多列和行，但我需要的只是第一列“年份”，第二列“总人口（人口普查）”；请注意，数据从第二行开始。要配置所有这些，我再次回到数据功能并编写以下代码：

data: {: { ...... startRow: 1, //second row: 1, //second row startColumn: 0, // first column “Year”: 0, // first column “Year” endColumn: 1 // second column “”: 1 // second column “” },},

是这样，两个简单的步骤即可使用Highcharts库显示HTML表中的数据。

在下面的评论部分中，让我知道您使用Highcharts可视化HTML表的经验。

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】****