热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《Chart.js使用X轴时间动态更新图表》经验,如何解决这个问题?

我正在使用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 )'
        },
      }]
    }
  }
});

这是图表:


推荐阅读
author-avatar
风之云织2004
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有