国产19p,欧美人成在线视频,日韩日日日

Highcharts使用HTML表中的數(shù)據(jù)創(chuàng)建交互式圖表教程

翻譯|使用教程|編輯：楊鵬連|2021-02-03 10:14:54.507|閱讀 423 次

概述：在本文中，我將向您展示一個(gè)簡(jiǎn)單的方法，說明如何使用HTML表中的數(shù)據(jù)創(chuàng)建交互式圖表。

Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

??1è?2??????

在本文中，我將向您展示一個(gè)簡(jiǎn)單的方法，說明如何使用HTML表中的數(shù)據(jù)創(chuàng)建交互式圖表。

多虧了Highcharts數(shù)據(jù)模塊，很容易和直接裝載一個(gè)HTML表作為數(shù)據(jù)源。

下面的演示將1935年至2020年的日本人口統(tǒng)計(jì)數(shù)據(jù)可視化。數(shù)據(jù)是從HTML表中獲取的：

讓我們看看如何做

創(chuàng)建此交互式圖表有兩個(gè)簡(jiǎn)單的步驟：
1. HTML源代碼

第一步是復(fù)制表的HTML源代碼以使其可視化。我使用了日本總?cè)丝?935年至2020年從日本維基百科網(wǎng)頁的人口。

在下面的圖片中，您可以看到我的訪問方式，然后使用開發(fā)者工具從Google chrome復(fù)制HTML代碼：

如果您使用的是其他瀏覽器，請(qǐng)隨時(shí)檢查如何相應(yīng)地獲取此數(shù)據(jù)。

重要的是要注意，在將數(shù)據(jù)輸入Highcharts之前，數(shù)據(jù)是干凈的。在這種情況下，我從數(shù)據(jù)中刪除了逗號(hào)，因此結(jié)果是68254，而不是69254（如表中所示）。請(qǐng)隨意應(yīng)用任何方法來清理您認(rèn)為合適的數(shù)據(jù)。
此階段的最后一步是將HTML代碼粘貼到HTML部分中。在這種情況下，當(dāng)我使用Codepen時(shí)，我會(huì)將表格粘貼到HTML部分下。

2.圖表配置

現(xiàn)在已經(jīng)準(zhǔn)備好數(shù)據(jù)，讓我們?cè)O(shè)置Highcharts從表中獲取數(shù)據(jù)并對(duì)其進(jìn)行可視化。
第一步是將表鏈接到JS代碼，為此，我向表添加了HTML id屬性：id="datatable"

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

然后，我通過該data功能將表格作為數(shù)據(jù)源提供給Highcharts ：

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

該表具有許多列和行，但我需要的只是第一列“年份”，第二列“總?cè)丝冢ㄈ丝谄?查）”；請(qǐng)注意，數(shù)據(jù)從第二行開始。要配置所有這些，我再次回到數(shù)據(jù)功能并編寫以下代碼：

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

是這樣，兩個(gè)簡(jiǎn)單的步驟即可使用Highcharts庫顯示HTML表中的數(shù)據(jù)。

在下面的評(píng)論部分中，讓我知道您使用Highcharts可視化HTML表的經(jīng)驗(yàn)。

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率

想要購(gòu)買Highcharts正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：原型設(shè)計(jì)工具Axure RP參考（二十一）：菜單小部件下一篇：報(bào)表設(shè)計(jì)器ActiveReports使用教程詳解（附源碼）