ChartJS数据格式

Question

我正在尝试制作一个图表，显示使用chartJS生产的太阳能电池板的功率。我使用以下格式的数据

{x: Fri Mar 19 2021 06:20:28 GMT+0100 (centraleuropeisk normaltid), y: 1.88}

它做了一个图形，但是x值不是一个可读的日期格式。图表如下所示：

链接到图表的图片(我显然还不能发布图片) https://i.imgur.com/HUOHoqg.png

为了制作图表，我使用了以下代码：

var ctx = document.getElementById("lineChart");
  var line = new Chart(ctx, {
    type: "scatter",
    data: {
      datasets: [
        {
          data: power,
          borderColor: "#ffd420",
          showLine: true,
          fill: false,
        },
      ],
    },
    options: {
      tooltips: { enabled: false },
      hover: { mode: null },
      elements: {
        point: {
          radius: 0,
        },
      },
      //---
      xAxes: [],
      //--
    },
  });

我尝试使用xAxes设置，但它仍然显示大量的数字而不是日期。有人知道什么设置可以解决这个问题吗?或者我需要更改输入的格式吗？我已经找了很多，但我还是找不到解决这个问题的办法。

Answer 1

有两个选项，你可以使用chart.js提供的时间刻度在这里你可以设置你想让它显示日期的格式：https://www.chartjs.org/docs/latest/axes/cartesian/time.html

其他选项是使用tick回调自己完成，如下所示：

options: {
        scales: {
            xAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        const date = new Date(value)
                        return `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`
                    }
                }
            }]
        }
    }