Chart.js v2 格式化时间标签答案

【问题标题】：Chart.js v2 formatting time labelsChart.js v2 格式化时间标签
【发布时间】：2019-01-22 00:55:07
【问题描述】：

我有图表，用户可以在其中输入不同范围的时间跨度，以获得所需的结果集。根据图表的范围，时间的格式应该不同。例如，查看 10 分钟长的图表，您可能会看到格式为 HH:MM 的时间线，但这对于一个月长的图表没有意义，因为格式更有意义格式为 mm/dd。

返回数据集时，我有开始时间戳（unix ts）和结束时间戳（也是 unix ts）。

Chart.js 是否有工具能够通过转换我上面的时间戳来帮助做出关于格式化时间标签的明智决策？我是否需要使用自定义算法编写回调，手动确定图形和标签的时间戳？

如果需要手动算法，则需要一些代码来涵盖许多用例：

if (timespan > 86400 * 30)      
{
    // create format code for month 
}
else if (timespan > 86400 * 5)
{
    // weekly format
}
else if ( ... ) {}

Chart.js 有没有更好的方法？

【问题讨论】：

标签： javascript chart.js chart.js2

【解决方案1】：

来自 Chart.js time axis documentation:

在构建它的刻度时，它会根据刻度的大小自动计算最舒适的单位。

这似乎运作良好，如下面的两个图表所示，第一个范围为 10 分钟，第二个范围为 10 天：

let now = (new Date()).getTime(),
  minutes = [],
  days = [],
  options = {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  };

for (let i = 0; i < 10; i++) {
  minutes.push({
    x: now + (60000 * i),
    y: 10
  });
  days.push({
    x: now + (86400000 * i),
    y: 10
  });
}

new Chart(document.getElementById('canvas1'), {
  type: 'line',
  data: {
    datasets: [{
      data: minutes
    }]
  },
  options: options
});

new Chart(document.getElementById('canvas2'), {
  type: 'line',
  data: {
    datasets: [{
      data: days
    }]
  },
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

您可以pass in display formats 为各种单位（分钟、天、月等）自动获取所需的缩放和格式。

【讨论】：