标签中的Chart.JS格式日期

wdebmtf2 于 2023-01-20 发布在 Chart.js

关注(0)|答案(1)|浏览(188)

在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...
]}});

它可以工作，但我得到一个Moment.JS警告消息：
弃用警告：提供的值不是可识别的RFC2822或ISO格式...不建议使用非RFC2822/ISO日期格式，并将在即将发布的主要版本中删除。
既然我正在使用的方法显然不受鼓励，那么是否有一种合适的方法来格式化Chart.JS中数据标签的日期？

- 与labels: timestamps一起**

- 带有labels: timestamps.map(t => t.toLocaleString(...)**

chart.js

来源：https://stackoverflow.com/questions/54334676/chart-js-format-date-in-label

1条答案

按热度按时间

vuktfyat1#

我通过检查Chart.js提供的a sample chart的源HTML文件找到了答案。
为了正确地格式化日期，必须在轴上添加parser和tooltipFormat属性。

this.chart = new Chart(ctx,
  {
    type: 'line',
    data: {
      labels: timestamps,
      datasets: [
        {
          data: measurements,
        }
      ]
    },
    options: {
      scales: {
        xAxes: [ {
            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...
        ],
      }
    }
  }
);

编辑（2023年1月17日）

我最初链接的示例图表已经从Chart.js文档中删除，下面是他们关于时间尺度的最新链接：Time Cartesian Axis | Chart.js

赞(0）回复(0）举报 2023-01-20

我来回答

标签中的Chart.JS格式日期

1条答案

编辑（2023年1月17日）

相关问题

热门标签

最新问答