NodeRED中ChartJS折线图无输出，双Y轴实时图表配置求助

问题背景 #

已安装node-red-contrib-chartjs包，Line Chartjs节点未找到文档提及的Payload选项卡，因此通过前置函数节点编写配置代码传递数据。目标是将HTTP输出的两组数值（msg.payload.readResults[0].v和msg.payload.readResults[1].v）作为双Y轴数据集，X轴暂用硬编码的1-10（后续替换为Footage）。单独返回单组数值时能得到预期结果，但注入节点后调试窗口及ChartJS折线图均无输出。

原错误代码 #

var left = {payload : msg.payload.readResults[0].v };
var right = {payload : msg.payload.readResults[1].v };

//return [[left,right]];

const labels = [1,2,3,4,5,6,7,8,9,10];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: left,
      borderColor: '#ff0000',
      backgroundColor: '#ff0000',
      yAxisID: 'leftCamber',
    },
    {
      label: 'Dataset 2',
      data: right,
      borderColor: '#0000ff',
      backgroundColor: '#0000ff',
      yAxisID: 'rightCamber',
    }
  ]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    stacked: false,
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Line Chart - Multi Axis'
      }
    },
    scales: {
      leftCamber: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      rightCamber: {
        type: 'linear',
        display: true,
        position: 'right',

        // grid line settings
        grid: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
      },
    }
  },
};

const actions = [
  {
    name: 'CamberGraph',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = chart.data.labels.length
      });
      chart.update();
    }
  },
];

错误排查 #

1. 数据格式不匹配：left和right是包含payload的对象，但Chart.js要求dataset.data为数值数组，而非单个对象，导致数据无法被识别。
2. 未输出有效消息：函数节点没有返回包含ChartJS配置的msg对象，节点无法接收渲染所需的配置信息。
3. Actions逻辑错误：handler中把dataset.data赋值为labels.length（数值），直接覆盖了有效数据，导致图表无内容。

修正方案 #

以下是修正后的函数代码，同时支持实时数据累积（适合实时图表场景）：

// 初始化全局数组存储历史数据（避免每次重置）
context.set('leftData', context.get('leftData') || []);
context.set('rightData', context.get('rightData') || []);
context.set('labels', context.get('labels') || []);

// 提取当前数值
const currentLeft = msg.payload.readResults[0].v;
const currentRight = msg.payload.readResults[1].v;
// 模拟X轴Footage（此处用自增数值，后续替换为实际Footage）
const currentLabel = (context.get('labels').length + 1);

// 添加新数据到数组，保持最多10个数据点（可调整）
context.set('leftData', [...context.get('leftData'), currentLeft].slice(-10));
context.set('rightData', [...context.get('rightData'), currentRight].slice(-10));
context.set('labels', [...context.get('labels'), currentLabel].slice(-10));

// 构建ChartJS数据结构
const data = {
  labels: context.get('labels'),
  datasets: [
    {
      label: '左轴数据',
      data: context.get('leftData'),
      borderColor: '#ff0000',
      backgroundColor: 'rgba(255,0,0,0.1)',
      yAxisID: 'leftCamber',
      fill: false
    },
    {
      label: '右轴数据',
      data: context.get('rightData'),
      borderColor: '#0000ff',
      backgroundColor: 'rgba(0,0,255,0.1)',
      yAxisID: 'rightCamber',
      fill: false
    }
  ]
};

// 构建ChartJS配置
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    stacked: false,
    plugins: {
      title: {
        display: true,
        text: '双Y轴实时数据图表'
      }
    },
    scales: {
      leftCamber: {
        type: 'linear',
        display: true,
        position: 'left',
        title: {
          display: true,
          text: '左轴'
        }
      },
      rightCamber: {
        type: 'linear',
        display: true,
        position: 'right',
        title: {
          display: true,
          text: '右轴'
        },
        grid: {
          drawOnChartArea: false
        }
      },
    }
  }
};

// 将配置赋值给msg.config，传递给ChartJS节点
msg.config = config;
// 返回消息节点
return msg;

关键改动说明 #

• 使用Node-RED的context存储历史数据，实现实时数据累积，避免每次注入重置数据。
• 直接提取数值构建数据数组，符合Chart.js的dataset.data格式要求。
• 将完整的config对象赋值给msg.config，确保ChartJS节点能接收并渲染配置。
• 移除了错误的actions逻辑，若需动态更新可按需调整。
• 优化了图表样式（如添加轴标题、关闭填充），提升可读性。

内容的提问来源于stack exchange，提问作者Glenn94