Highcharts使用HTML表中的數據創建交互式圖表教程

Highcharts是一款純JavaScript編寫的圖表庫，爲你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極座標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版請添加鏈接描述

在本文中，我將向您展示一個簡單的方法，說明如何使用HTML表中的數據創建交互式圖表。

多虧了Highcharts數據模塊，很容易和直接裝載一個HTML表作爲數據源。

下面的演示將1935年至2020年的日本人口統計數據可視化。數據是從HTML表中獲取的：

讓我們看看如何做

創建此交互式圖表有兩個簡單的步驟：

1. HTML源代碼

第一步是複製表的HTML源代碼以使其可視化。我使用了日本總人口1935年至2020年從日本維基百科網頁的人口。

在下面的圖片中，您可以看到我的訪問方式，然後使用開發者工具從Google chrome複製HTML代碼：

如果您使用的是其他瀏覽器，請隨時檢查如何相應地獲取此數據。

重要的是要注意，在將數據輸入Highcharts之前，數據是乾淨的。在這種情況下，我從數據中刪除了逗號，因此結果是68254，而不是69254（如表中所示）。請隨意應用任何方法來清理您認爲合適的數據。
此階段的最後一步是將HTML代碼粘貼到HTML部分中。在這種情況下，當我使用Codepen時，我會將表格粘貼到HTML部分下。

2.圖表配置

現在已經準備好數據，讓我們設置Highcharts從表中獲取數據並對其進行可視化。
第一步是將錶鏈接到JS代碼，爲此，我向表添加了HTML id屬性：```

id="datatable"
  <table id =“ datatable”><table id = “ datatable” > 
    <thead><thead>
      <tr><tr>

然後，我通過該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請添加鏈接描述幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃請添加鏈接描述，提高準時交貨能力，提高產能和資源利用率