【Day 6】簡單的"D3"折線圖 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 6

0

Modern Web

適用於傳產從業人員的實用報表製圖術系列第 6 篇

【Day 6】簡單的"D3"折線圖

14th鐵人賽傳產製圖 d3.js 折線圖 observable

團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

2022-09-11 19:43:56

568 瀏覽

分享至

前言

今天要把折線圖改用 d3 來畫圖

參考
D3 Gallery line-chart
https://observablehq.com/@d3/line-chart
D3 Gallery multi-line-chart
https://observablehq.com/@d3/multi-line-chart

開始畫圖

引用範例程式碼，直接按下方的按鈕 Copy code
按 "+" javascript，import {LineChart}
修改傳入的資料
- app1 傳入的資料名稱
- x: d.date 是 x 軸資料
- y: d.close 是 y 軸資料
修改後，執行程式碼，圖片沒有資料值
解決圖片無資料值的方法
- 先把資料年分改用西元年
- 再用 new Date () 把時間轉換成世界時間標準 UTC
參考資料
scaleTime

JavaScript Date Formats

【Day 5】多系列的折線圖

【Day 7】資料內容與瑣碎的處理流程

系列文

適用於傳產從業人員的實用報表製圖術共 30 篇

目錄

RSS系列文訂閱系列文

12 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙