堆栈内存溢出
  简体   繁体   English

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

[英]Chart.js Dynamically Updating Chart with X Axis Time

 原文  2019-04-23 14:06:36  5   1    javascript/ chart.js/ chart.js2

问题描述

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in. 我正在使用Chart.js版本2.7.1，当温度数据进入时，我正在动态更新我的折线图。

The problem is that the lines never pass the halfway mark of the x axis in time. 问题是线条不会及时通过x轴的中间标记。 Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. 每次更新时，图表会自动缩放x轴的右侧（最大时间），因此我的数据永远不会接近图表的右侧。 What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. 我想要的是线路接近右侧，每次更新时，只有很短的时间延长到x轴的未来。 How can I accomplish this? 我怎么能做到这一点？ Thanks. 谢谢。

Here is how I configure the chart: 以下是我配置图表的方法： 

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

Here is the chart: 这是图表： 在此输入图像描述

1 个解决方案

解决方案1
 2 已采纳  2019-05-16 07:57:52

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data . 你可以在下面的代码片段，并感谢也能看到丹尼尔W¯¯Strimpel创建初始段，你的问题是在热和冷的温度 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) }

both of those arrays have n number of entries in the end missing the y coordinate including the temperature value . 这两个数组都有n个条目，最后缺少y坐标，包括温度值 。 I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data . 我通过删除冷和热温度data最后5个条目的y重新创建了您的方案。

The chart will add the date to the x axis , but it will not add a temperature value and the line will not show up. chart会将日期添加到x axis ，但不会添加temperature值，也不会显示该行。 

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

The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData 代码片段重新创建您的场景，您可以运行它以了解问题并通过将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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Chart.js更新到X轴未更新 - Chart.js Update to X Axis Not Updating Chart.js 中 x 轴上的时间格式 - Time format on the x axis in Chart.js 动态创建的 Chart.js 图表过度填充基于时间的 x 轴？ - Dynamically created Chart.js chart overpopulating time based x-axis? Chart.js 4 x 轴滚动与实时更新图形 - Chart.js 4 x-axis scroll with live updating graph Chart.js 时间序列 - 根据时间戳变化的 x 轴 - Chart.js Time series - x axis that change depending on timestamp Chart.js的X轴未采用类型：“时间” - X-axis of Chart.js not taking type : 'time' Chart.js x 轴日期时间格式化失败 - Chart.js x axis date-time formatting fails Chart.js图中X轴上的时间顺序错误 - Wrong order in Chart.js graph with time on the X-Axis 在 Chart.js 中将 x 轴标签格式化为时间值 - Formatting x-axis labels as time values in Chart.js 可滚动的x轴与chart.js 2.1.4 - Scrollable x axis with chart.js 2.1.4
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM