chartjs-plugin-streaming：onRefresh() 回调不工作

Question

你好，我是 javascript 世界的新人；我正在尝试使用 Chart.js 和 chartjs-plugin-streaming 实时显示随机数，从我的教程代码开始开始修改我的范围。

const Chart= require ("chart.js");
const chartStreaming = require('chartjs-plugin-streaming');
const boxWhiteColor = "#2043CE";
const pressure_graph = document.getElementById('pressureGraph').getContext('2d');
Chart.register(chartStreaming);
let pressure_graph_config = {
        type: 'line',
        data: {
          datasets: [{
            label: 'Pressure',
            data: [],
            borderColor: boxWhiteColor,
            fill: false
          }]
        }, 
    
        options: {
          title: {
            display: true,
            text: 'PRESSURE',
            fontColor: boxWhiteColor, 
            fontSize: 30
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: true, 
                drawBorder: true, 
                color: boxWhiteColor, 
                lineWidth: 5},
              ticks: {
                fontColor: boxWhiteColor,
                display: false
              },
              
              type: 'realtime',
               realtime: {
                duration: 10000,
                refresh: 100, // plot at 10 Hz
                delay:200,
                pause: false,     // chart is not paused
                ttl: undefined,   // data will be automatically deleted as it disappears off the chart
                frameRate: 100,    // data points are drawn 100 times every second
                onRefresh: chart => {  
                  
                  console.log(trocarP.data.datasets.data);
                  chart.config.data.datasets.forEach(function(dataset) {
                    chart.data.dataset[0].data.push({
                      x: Date.now(),
                      y: Math.random() //pressure16bits[pressure16bits.length-1]
                    });
                  });
                 
                }
              }
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: '[mmHg]', fontColor: boxWhiteColor, fontSize: 30, fontStyle: 900,
              },
              ticks: {
                fontColor: boxWhiteColor,
                fontSize: 25,
                fontStyle: 700,
                maxTicksLimit: 5,
                min: 0,
                max: 40,
              },
              gridLines: {display: true, drawBorder: true, color: boxWhiteColor, lineWidth: 5},
            }]
          },
          elements: { 
            point: {radius: 0},
          },
          legend: { display: false}
        }
    }
    trocarP = new Chart (pressure_graph, pressure_graph_config);

问题是图表是通过 .html 文件在 canvas 上创建的，但是它没有显示任何内容；尝试调试代码我发现我放在 onRefresh 回调中的 console.log() 没有打印任何东西，所以 我假设回调没有工作.有什么线索吗？

Screenshot of the graph

编辑：我注意到 Y 轴标签也没有显示。我不明白这段代码有什么问题。

Answer 1

您在使用库的 v3 时使用 v2 语法，这将无法工作，因为有几个重大更改，请参阅 migration guide 了解所有更改。

例如，定义比例的方式发生了变化，您需要一个用于日期等的适配器。

工作基本 v3 示例：

var options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 100,
          delay: 200,
          onRefresh: chart => {
            const now = Date.now();
            chart.data.datasets.forEach(dataset => {
              dataset.data.push({
                x: now,
                y: Math.random()
              });
            });
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/2.0.0/chartjs-plugin-streaming.js"></script>
</body>

chartjs-plugin-streaming：onRefresh() 回调不工作

chartjs-plugin-streaming: onRefresh() callback isn't working

javascript

html

electron

chart.js

real-time