如何实现Plotly React图表随数据变化自动更新？

问题根源 #

• props接收错误：BarChart组件直接把参数当作count，但React组件的参数是props对象，实际传入的是{ value: count }，导致组件根本没拿到正确的状态值。
• 数据维度不匹配：点击按钮后y数组长度增加，但x数组固定为3个元素，Plotly无法正确渲染新增数据，进而不触发图表更新。

修复步骤 #

1. 修正props接收方式：在BarChart组件中正确解构props，获取传入的value属性。
2. 同步x轴数据：让x轴数据长度和y轴保持一致，动态生成对应标签，避免数据维度不匹配。

修改后的完整代码 #

import React, { useState } from 'react';
import Plot from 'react-plotly.js';

function Main() {
  const [count, setCount] = useState([1,2,3]);
  
  const addData = () => {
    // 新增随机数据，也可替换为固定值
    setCount(prev => [...prev, Math.floor(Math.random() * 100)]);
  };

  return(
    <>
      <BarChart value={count}/>
      <button onClick={addData}>添加数据</button>
    </>
  )
}

const BarChart = ({ value }) => {
  // 动态生成x轴标签，和y轴数据一一对应
  const xLabels = value.map((_, index) => `item${index + 1}`);

  return (
    <div>
      <Plot
        data={[
          {
            type: 'scatter',
            x: xLabels,
            y: value,
            marker: {color: 'red'}
          }
        ]}
        layout={{width: 1000, height: 500, title: "数据图表"}}
      />
    </div>
  )
}

export default Main;

额外说明 #

• 确保react-plotly.js依赖已正确安装，且版本与当前React版本兼容。
• Plotly组件会自动检测data/layout的引用变化，这里每次渲染都会生成新的数组和对象，满足更新触发条件。

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