Highcharts使用HTML表中的資料建立互動式圖表教程

語言: CN / TW / HK

時間 2021-02-05 10:01:33 osc_mwfx0ffs

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

點選下載Highcharts最新試用版請新增連結描述

Highcharts使用HTML表中的資料建立互動式圖表教程

在本文中，我將向您展示一個簡單的方法，說明如何使用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"
  <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請新增連結描述幫助提升企業生產效率，真正實現生產計劃視覺化呈現與控制,快速有效響應不同場景的生產計劃請新增連結描述，提高準時交貨能力，提高產能和資源利用率

「其他文章」