Chartjs 时间戳到日期时间标签答案

【问题标题】：Chartjs Timestamp to Datetime labelsChartjs 时间戳到日期时间标签
【发布时间】：2021-04-23 09:48:48
【问题描述】：

我使用时间戳格式来创建我的散点图（日期时间不适用于散点图）。我需要帮助将 X 轴上的标签从时间戳更改为日期时间，以便用户可以阅读。只是轴标签，而不是插入图表的实际时间戳值。

 let ctx = (<HTMLCanvasElement>(
  document.getElementById("measurementChart")
)).getContext("2d");
 this.myChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: name,
        backgroundColor: "black",
        borderColor: "blue",
        showLine: true,
        data: d,
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    responsive: true,
    tooltips: {
      mode: "interpolate", //interpolate
      enabled: true,
      intersect: false,
      backgroundColor: "black",
    },
    scales: {
      yAxes: [
        {
          display: true,
          scaleLabel: {
            display: true,
          },
        }
      ],
      xAxes: [
        {
          display: true,
          scaleLabel: {
            display: false,
            labelString: "Date"
          },
        }
      ]
    },
    legend: {
        reverse: true,
      display: true,
    },
  }
});

【问题讨论】：

标签： javascript charts chart.js chartjs-2.6.0

【解决方案1】：

您可以使用此处所述的刻度回调：https://www.chartjs.org/docs/2.9.4/axes/labelling.html#creating-custom-tick-formats

scales: {
      yAxes: [
        {
          ticks:{
            callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
           },
          display: true,
          scaleLabel: {
            display: true,
          },
        }
      ],
      xAxes: [
        {
          ticks:{
            callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
           }
          display: true,
          scaleLabel: {
            display: false,
            labelString: "Date"
          },
        }
      ]
    }

【讨论】：