亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 chart.js 繪制二維線時間圖

如何使用 chart.js 繪制二維線時間圖

牛魔王的故事 2023-03-03 10:12:30
我想用 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 }      });  });事實上,時間應該以天為單位,因為我有大約同一時間每個日期的價格。這是我不工作的演示。(演示已使用答案代碼更新)。
查看完整描述

1 回答

?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

要使您的代碼正常工作,您可以使用散點圖并將選項添加showLine: true到每個dataset.

為了獲取每天的格式化標簽,您需要通過將以下配置添加到 chart 來將 x 軸定義為時間笛卡爾軸options。

scales: {

  xAxes: [{

    type: 'time',

    time: {

      unit: 'day',

      tooltipFormat: 'MMM DD'

    }

  }] 

}

請注意,Chart.js 在內部使用 Moment.js 來實現時間軸的功能。因此,您應該使用在單個文件中包含 Moment.js 的 Chart.js捆綁版本。

當需要在工具提示中顯示標簽時,將以下內容添加到圖表中options。

tooltips: {

  mode: 'point',

  callbacks: {

    title: (tooltipItem, data) => data.datasets[tooltipItem[0].datasetIndex].label

  }

}

請查看您修改后的CodePen。



查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 223 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號