Highcharts使用HTML表中的數據創建交互式圖表教程
Highcharts是一款純JavaScript編寫的圖表庫,為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極座標圖等幾十種圖表類型。
在本文中,我將向您展示一個簡單的方法,説明如何使用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請添加鏈接描述幫助提升企業生產效率,真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃請添加鏈接描述,提高準時交貨能力,提高產能和資源利用率
- Highcharts使用HTML表中的數據創建交互式圖表教程
- bzoj1529: [POI2005]ska Piggy banks(並查集)
- 深入剖析Java中的斷言assert
- Nacos 1.4.1 之前存在鑑權漏洞,建議修復到最新版
- 內存操作函數:memcpy函數,memove函數
- 微軟開源 Python 自動化神器 Playwright
- Web前端之HTML
- java class文件安全加密工具
- 5G QoS和DNN以及網絡切片技術
- 有獎問答獲獎名單出爐,快來看看有沒有你!
- IDEA Groovy腳本一鍵生成實體類,用法舒服,高效!
- 微信api調用限制,45009 reach max api daily quota limit 解決方法
- OpenStack Placement組件
- 【Linux服務器開發系列】手寫用户態協議棧,udpipeth數據包的封裝,零拷貝的實現,柔性數組
- requestAnimationFrame詳解
- k8s集羣多容器Pod和資源共享
- 梯度提升樹(GBDT)詳解之二:分類舉例
- Automatic Model Evaluation - 知乎
- Linux下IPMI iBMC遠程管理配置查詢及密碼重置
- 京東/淘寶的手機銷售榜(前4名 -- 手機品牌 --手機型號*3 --手機分辨率 -- 手機操作系統 --安卓版本號)(android / IOS)