iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0

前言

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

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

開始畫圖

  1. 引用範例程式碼,直接按下方的按鈕 Copy code

  2. 按 "+" javascript,import {LineChart}

  3. 修改傳入的資料

    • app1 傳入的資料名稱
    • x: d.date 是 x 軸資料
    • y: d.close 是 y 軸資料

    修改後,執行程式碼,圖片沒有資料值

  4. 解決圖片無資料值的方法

    • 先把資料年分改用西元年
    • 再用 new Date () 把時間轉換成世界時間標準 UTC


    參考資料
    scaleTime

    JavaScript Date Formats


上一篇
【Day 5】 多系列的折線圖
下一篇
【Day 7】 資料內容與瑣碎的處理流程
系列文
適用於傳產從業人員的實用報表製圖術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言