chartjs 在网格上绘制带有时间偏移的日期时间值

Question

我有一个显示 Datetime 值的 ChartJS 折线图。

每个值都显示在图表上 XAxis 日期标签所在的垂直线上。

我需要的是根据当天的时间绘制数据。例如，如果我有两个数据点：

{ t: '2019-08-15T09:00:00Z', y: 0.3 },
{ t: '2019-08-15T17:00:00Z', y: 0.3 }

我应该看到的是 第一个 数据点将显示距离日网格垂直线 offset 一点，而 第二个 数据点将绘制在第一个点的右侧。

与下一张图片类似的内容：

Is this possible?

Answer 1

假设配置正确，这应该是 time axis 的默认行为。我已将几个数据点添加到您的集合中，以便在下面的代码片段中进行说明。

此外，我看到您已将您的问题标记为 chartjs-2.6.0。轴处理在最近的版本中得到了显着改进，因此请尽可能升级。

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    datasets: [{
      data: [{
          t: '2019-08-14T09:00:00Z',
          y: 0.1
        },
        {
          t: '2019-08-15T09:00:00Z',
          y: 0.3
        },
        {
          t: '2019-08-15T17:00:00Z',
          y: 0.3
        },
        {
          t: '2019-08-16T09:00:00Z',
          y: 0.5
        }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "day"
        }
      }]
    }
  }
});

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

chartjs 在网格上绘制带有时间偏移的日期时间值

chartjs plot datetime value with time offset on the grid

chart.js

chartjs-2.6.0