Chart.js 动态更新带时间 X 轴的图表

Question

我正在使用Chart.js版本2.7.1，并在温度数据到达时动态更新我的折线图。问题是，每次我更新时，图表都会自动调整X轴右侧（最大时间）的比例尺，使我的数据永远不会接近图表的右侧。我希望线条能够接近右侧，并且每次更新时只扩展一个小的时间间隔到未来的X轴。我该如何实现这一点？下面是我的图表配置：

var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;

var chart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: [],
      legend: {
         display: true
      },
      datasets: [{
          fill: false,
          data: [],
          label: 'Hot Temperature',
          backgroundColor: "#FF2D00",
          borderColor: "#FF2D00",
          type: 'line',
          pointRadius: 1,
          lineTension: 2,
          borderWidth: 2
      },
      {
          fill: false,
          data: [],
          label: 'Cold Temperature',
          backgroundColor: "#0027FF",
          borderColor: "#0027FF",
          type: 'line',
          pointRadius: 1,
          lineTension: 2,
          borderWidth: 2
      }]
  },
  options: {
    animation: false,
    responsive: true,
    scales: {
      xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time ( UTC )'
          },
          type: 'time',
          time: {
            tooltipFormat: "hh:mm:ss",
            displayFormats: {
              hour: 'MMM D, hh:mm:ss'
            }
          },
          ticks: {
                    maxRotation: 90,
                    minRotation: 90
          }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Temperature ( Celcius )'
        },
      }]
    }
  }
});

这里是图表:

- PhilBot

---

请提供您正在使用的数据和标签数组。 - Carlos Alves Jorge

没有数据很难进行鉴定。请分享您的数据。 - Towkir

你能否在JSFiddle或其他来源上尝试复制这种行为？我创建了一个JSFiddle，但无法复制您所看到的内容。使用您上面提供的配置和一些随机数据，我的线条完全跨越整个图表。也许您可以更新我的示例以显示问题。https://jsfiddle.net/k1g7zw2r/1/ - Daniel W Strimpel

@LogicalBranch他的铜徽章比声望更多。无论如何，访问他的活动选项卡，他的声望从未超过357，也许他太频繁地提供赏金，或者他可能是个机器人 :D - Towkir

@Towkir 机器人能给出答案吗？天啊...人工智能真的正在接管。 - Malekai

Answer 1

正如您在下面的代码片段中所看到的，也要感谢Daniel W Strimpel创建了最初的代码片段，您的问题出现在热和冷温度数据中。

{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }

这两个数组在末尾都缺少了y坐标，包括温度值。我通过删除冷热温度数据中最后5个条目的y来重现您的情况。 图表将添加日期到x轴，但不会添加温度值，线条也不会显示出来。

"Original Answer"翻译成"最初的回答"

{x: new Data(2019, 0, 14, 1, 26, 0) }

该代码片段重新创建了您的情境，您可以运行它以了解问题，并通过将y值添加到getHotTempData和getColdTempData中的最后5个条目来修复它。"最初的回答"

var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;

var chart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: [],
      legend: {
         display: true
      },
      datasets: [{
          fill: false,
          data: getHotTempData(),
          label: 'Hot Temperature',
          backgroundColor: "#FF2D00",
          borderColor: "#FF2D00",
          type: 'line',
          pointRadius: 1,
          lineTension: 2,
          borderWidth: 2
      },
      {
          fill: false,
          data: getColdTempData(),
          label: 'Cold Temperature',
          backgroundColor: "#0027FF",
          borderColor: "#0027FF",
          type: 'line',
          pointRadius: 1,
          lineTension: 2,
          borderWidth: 2
      }]
  },
  options: {
    animation: false,
    responsive: true,
    scales: {
      xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time ( UTC )'
          },
          type: 'time',
          time: {
            tooltipFormat: "hh:mm:ss",
            displayFormats: {
              hour: 'MMM D, hh:mm:ss'
            }
          },
          ticks: {
                    maxRotation: 90,
                    minRotation: 90
          }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Temperature ( Celcius )'
        },
      }]
    }
  }
});

function getHotTempData() {
  return [
    { x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
    { x: new Date(2019, 0, 1, 14, 1, 26, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 27, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 28, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 29, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 30, 0) }
  ];
}

function getColdTempData() {
  return [
    { x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
    { x: new Date(2019, 0, 1, 14, 1, 26, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 27, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 28, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 29, 0) },
    { x: new Date(2019, 0, 1, 14, 1, 30, 0) }
  ];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

- Fabrizio Bertoglio