如何使用图表.js 控制数据记录器上显示的值的数量？

问题描述 投票：0回答：1

我是一个使用数据记录器的新手 - 令人惊讶的是：我遇到了问题。我的想法是始终在 Chart.js 图表上显示一定数量的值（现在假设为 20 个）。基本上，这意味着我需要隐藏最旧的数据点并将最新的数据点附加在右侧。 我当前的代码看起来像这样：

<!DOCTYPE html>
<html>
<head>
  <title>Test Chart</title>
</head>
<body>
    <div style="position: relative;">
    <canvas id="chartCanvas" width="600" height="400"></canvas>
    <button id="resetZoomButton" style="position: absolute; top: 10px; right: 10px;">Reset Zoom</button>
  </div>
  <script src="/node_modules/chart.js/dist/chart.umd.js"></script>
  <script src="/node_modules/hammerjs/hammer.min.js"></script>
  <script src="/node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js：

document.addEventListener('DOMContentLoaded', function () {
  const ctx = document.getElementById('chartCanvas').getContext('2d');

  const data = {
    labels: [],
    datasets: [{
      label: 'Value',
      data: [],
      borderColor: 'blue',
      backgroundColor: 'rgba(0, 0, 255, 0.1)',
    }]
  };

  const options = {
    title: {
      display: true,
      text: 'Live Data Logger',
    },
    legend: {
      position: 'bottom',
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        ticks: {
          stepSize: 1,
          suggestedMin: 0,
        }
      },
      y: {
        beginAtZero: true,
      }
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          drag: {
            enabled: true,
          },
          mode: 'xy',
        },
        pan: {
          enabled: false,
          mode: 'x',
        }
      }
    }
  };

  const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options,
  });

  function addDataPoint() {
    const x = chart.data.labels.length;
    const y = Math.random() * 100;

    chart.data.labels.push(x);
    chart.data.datasets[0].data.push(y);

    chart.update();

  }

  setInterval(addDataPoint, 1000)

  
  const resetZoomButton = document.getElementById('resetZoomButton');
    resetZoomButton.addEventListener('click', function () {
    chart.resetZoom();
  });
});

我尝试将 addDataPoint() 函数修改为类似的内容

  function addDataPoint() {
    const x = chart.data.labels.length;
    const y = Math.random() * 100;

    if (x<20){
        chart.data.labels.push(x);
        chart.data.datasets[0].data.push(y);
        chart.update();
        } else {
                chart.data.labels.shift();
            chart.data.datasets[0].data.shift();
            chart.update();
            }

  }

但是，它似乎只是删除旧值并将所有新值附加在同一位置。我该如何解决这个问题？

此外，我还想这样做，以便旧值不会被删除，而只是隐藏，这样如果我缩小，我仍然可以看到旧值。 （我已经使用插件添加了缩放功能）

谢谢您的帮助！

更新：我现在可以控制显示数字的数量为20，但是，旧数据将被删除 - 这不是我想要的。有什么办法可以解决这个问题吗？

javascript html chart.js
1个回答
0
投票

你用 x 标签弄乱了一些东西。有 2 个选项，要么将第一个标签保留为 

0
（或 
1
），另一个选项是增加它，这样在 
20
之后就是 
21
，依此类推。

因此，请在此处使用 

true
或 
false
：

for (var i = 0; i < 20; i++) {
    labels[i] = false ? i : pos + i;
}


document.addEventListener('DOMContentLoaded', function() {
  const ctx = document.getElementById('chartCanvas').getContext('2d');

  const data = {
    labels: [],
    datasets: [{
      label: 'Value',
      data: [],
      borderColor: 'blue',
      backgroundColor: 'rgba(0, 0, 255, 0.1)',
    }]
  };

  const options = {
    title: {
      display: true,
      text: 'Live Data Logger',
    },
    legend: {
      position: 'bottom',
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        ticks: {
          stepSize: 1,
          suggestedMin: 0,
        }
      },
      y: {
        beginAtZero: true,
      }
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          drag: {
            enabled: true,
          },
          mode: 'xy',
        },
        pan: {
          enabled: false,
          mode: 'x',
        }
      }
    }
  };

  const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options,
  });


  var pos = 0;
  const window_size = 20;

  function addDataPoint() {
    const x = chart.data.labels.length;
    const y = Math.random() * 100;
    pos++;

    var labels = chart.data.labels
    var data = chart.data.datasets[0].data

    labels.push(x);
    data.push(y);

    if (data.length >= window_size) {
      labels.shift();
      data.shift();
    }

    // renumerate, or change pos (use true or false)
    for (var i = 0; i < window_size; i++) {
      labels[i] = false ? i : pos + i;
    }

    chart.data.labels = labels
    chart.data.datasets[0].data = data

    chart.update();

  }

  setInterval(addDataPoint, 250)

  const resetZoomButton = document.getElementById('resetZoomButton');
  resetZoomButton.addEventListener('click', function() {
    chart.resetZoom();
  });

});
<!DOCTYPE html>
<html>

<head>
  <title>Test Chart</title>
</head>

<body>
  <div style="position: relative;">
    <canvas id="chartCanvas" width="600" height="200"></canvas>
    <button id="resetZoomButton" style="position: absolute; top: 10px; right: 10px;">Reset Zoom</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.1/chart.umd.min.js" integrity="sha512-UcCmTcAm3IkzrswF+WqvwWSjsnv8nsJpDL09KHCETWS0g0WjoIZDRUYXCeHeow1cEij0kqL9OwRwirv/xCQ6GA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.