Question

我正在使用Chart.js版本2.7.1，并且在输入温度数据时动态更新线形图。

问题在于，这些线永远不会及时通过x轴的中途标记。每次更新时，图表都会自动缩放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 )'
        },
      }]
    }
  }
});

以下是图表：

Answer 1

在以下代码段中可以看到，并且还要感谢Daniel W Strimpel创建了初始代码段，您的问题出在热和冷温度 { {1}}。

data

这些数组中的

数组最后都有{ 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) }个条目，缺少n坐标，包括温度值。我通过删除冷，热温度y的最后5个条目的y重新创建了您的方案。

data会将日期添加到chart，但不会添加x axis值，并且该行也不会显示。

temperature

该代码段可重新创建您的方案，您可以运行它以了解问题并通过将{x: new Data(2019, 0, 14, 1, 26, 0) }值添加到y和getHotTempData的最后5个条目中来解决该问题

getColdTempData

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

Chart.js使用X轴时间动态更新图表

1 个答案: