chartjs-plugin-streaming的onRefresh回调不触发 图表无数据且Y轴标签不显示

问题原因排查 #

• 1. Chart.js版本与配置语法不兼容
  你当前的配置用的是Chart.js v2的语法，而你安装的最新版Chart.js（v3/v4）已经废弃了xAxes/yAxes、fontColor、scaleLabel这类旧配置项，导致x轴的realtime属性没有被正确识别，所以onRefresh回调根本不会触发，同时Y轴标签的配置也因为语法不兼容失效。
• 2. 代码存在笔误
  onRefresh回调内存在两处拼写错误：
  • chart.data.dataset[0] 应为 chart.data.datasets[0]，少写了复数后缀s
  • trocarP.data.datasets.data 应为 trocarP.data.datasets[0].data，datasets是数组，需要先取下标
• 3. 随机数范围不匹配
  你Y轴设置的范围是0-40，但Math.random()生成的是0-1之间的数，就算配置正确数据也会挤在Y轴底部几乎看不到，可以改成Math.random()*40适配范围。

修正后的可用代码 #

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: {
    // 标题配置适配v3+语法
    plugins: {
      title: {
        display: true,
        text: 'PRESSURE',
        color: boxWhiteColor,
        font: {
          size: 30
        }
      },
      legend: {
        display: false
      }
    },
    scales: {
      // 新语法x轴直接写x，不需要xAxes数组
      x: {
        type: 'realtime',
        grid: {
          display: true,
          drawBorder: true,
          color: boxWhiteColor,
          lineWidth: 5
        },
        ticks: {
          color: boxWhiteColor,
          display: false
        },
        realtime: {
          duration: 10000,
          refresh: 100,
          delay: 200,
          pause: false,
          ttl: undefined,
          frameRate: 100,
          onRefresh: chart => {
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random() * 40 // 适配Y轴0-40的范围
              });
            });
          }
        }
      },
      // Y轴直接写y，不需要yAxes数组
      y: {
        min: 0,
        max: 40,
        // 标签配置用title，不是scaleLabel
        title: {
          display: true,
          text: '[mmHg]',
          color: boxWhiteColor,
          font: {
            size: 30,
            weight: 900
          }
        },
        ticks: {
          color: boxWhiteColor,
          font: {
            size: 25,
            weight: 700
          },
          maxTicksLimit: 5
        },
        grid: {
          display: true,
          drawBorder: true,
          color: boxWhiteColor,
          lineWidth: 5
        }
      }
    },
    elements: {
      point: {
        radius: 0
      }
    }
  }
}
const trocarP = new Chart(pressure_graph, pressure_graph_config);

额外注意 #

如果安装的Chart.js版本过高和chartjs-plugin-streaming不匹配，可以固定安装兼容版本：

npm install chart.js@3.9.1 chartjs-plugin-streaming@3.0.0

内容的提问来源于stack exchange，提问作者aka.Calamaro