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

cgh8pdjw 于 2023-08-05 发布在 Chart.js

关注(0)|答案(1)|浏览(142)

我是一个完全的新手工作的数据记录器-和惊喜：我有麻烦了。我的想法是始终在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，然而，旧的数据将被删除-不是我想要的。有什么办法解决这个问题吗？

chart.js

来源：https://stackoverflow.com/questions/76761780/how-can-i-control-the-number-of-values-shown-on-a-data-logger-using-chart-js

1条答案

按热度按时间

bwitn5fc1#

你把一些东西和x标签搞混了。有两个选项，要么保持第一个标签为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>

的数据

赞(0）回复(0）举报 2023-08-05

我来回答

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

1条答案

相关问题

热门标签

最新问答