标签中Chart.JS格式的日期

JED*_*JED 0 javascript chart.js

如何在Chart.JS的数据点标签中格式化日期?

我已经试过了:

this.chart = new Chart(ctx,
  {
    data: {
      labels: timestamps 
                .map(t => t.toLocaleString([], { month: '2-digit', day: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })),
      datasets: [
        {
          data: measurements
        }, 
        //etc...
]}});
Run Code Online (Sandbox Code Playgroud)

它有效,但是我收到了Moment.JS警告消息:

弃用警告:提供的值不是公认的RFC2822或ISO格式...不建议使用非RFC2822 / ISO日期格式,并将在即将发布的主要版本中将其删除。

由于显然不鼓励使用我使用的方法,因此在Chart.JS中是否有适当的格式来格式化数据标签的日期?

labels: timestamps

显示默认日期格式的图表

labels: timestamps.map(t => t.toLocaleString(...)

图表显示localeString格式

JED*_*JED 5

通过检查Chart.js提供的示例图表的源HTML文件,我能够找到答案。

为了正确格式化日期,必须将解析器和tooltipFormat属性添加到相关轴。要修复上面给出的示例:

this.chart = new Chart(ctx,
  {
    type: 'line',
    data: {
      labels: timestamps,
      datasets: [
        {
          data: measurements,
        }
      ]
    },
    options: {
      scales: {
        xAxis: [
          display: true,
          type: 'time'
          time: {
            parser: 'MM/DD/YYYY HH:mm',
            tooltipFormat: 'll HH:mm',
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
              'day': 'MM/DD/YYYY'
            }
          }
        ],
        yAxis: [
          // etc...
        ],
      }
    }
  }
);
Run Code Online (Sandbox Code Playgroud)

  • 如果您尝试此操作但收到“未捕获错误:此方法未实现...”,您可能需要包含日期库和日期适配器。请参阅此答案:/sf/answers/4853494201/ 和文档的这一部分:https://www.chartjs.org/docs/2.9.4/axes/cartesian/time.html (3认同)