我想用 chart.js 繪制折線圖,但所有示例都顯示單個數組作為數據,我有 2d 數據。X 是天(日期對象),y 是產品的價格。我有這樣的功能來創建數據:function format(data) { const result = []; Object.entries(data).forEach(([key, value]) => { var data = { label: key, backgroundColor: 'rgba(0,0,0,0)', data: value.map(data => ({y: data[0], x: new Date(data[1])})) }; result.push(data); }); return result;}從文檔中我看到我可以將對象與 {x,y} 一起使用,但這只渲染了 2 點。數據輸出如下所示:[ { "label": "cyfrowe.pl", "backgroundColor": "rgba(0,0,0,0)", "data": [ { "y": 9299, "x": "2020-08-01T05:19:28.000Z" }, { "y": 9299, "x": "2020-08-02T04:15:01.000Z" },我的圖表代碼如下所示:var canvas = document.querySelector('canvas');var ctx = canvas.getContext('2d');console.log(ctx);fetch('price.json') .then(res => res.json()) .then(data => { data = format(data); console.log(data); console.log(JSON.stringify(data.slice(0,1), true, 4)); var myLineChart = new Chart(ctx, { type: 'line', data:{ datasets: data } }); });事實上,時間應該以天為單位,因為我有大約同一時間每個日期的價格。這是我不工作的演示。(演示已使用答案代碼更新)。
如何使用 chart.js 繪制二維線時間圖
牛魔王的故事
2023-03-03 10:12:30