Question

我有一些图表，用户可以在其中输入不同的时间范围，以便将所需的结果集绘制成图表。根据图表的范围，时间的格式应该不同。例如，查看一个长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是否有更好的方法？

Answer 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设置各种单位（分钟，天，月等），以自动获得所需的缩放比例和格式。

Chart.js v2格式化时间标签

1 个答案: