React项目中react-plotly.js无法渲染Plotly JSON的图表标题

在React Web应用中使用react-plotly.js（版本^2.6.0）渲染从Python导出的Plotly JSON格式图表，JSON的layout字段中已设置title: "Pie chart"，但渲染后图表标题未正常显示。

提供的JSON示例 #

{
  "data": [{
    "values": [19, 26, 55],
    "labels": ["Residential", "Non-Residential", "Utility"],
    "type": "pie"
  }],
  "layout": {
    "height": 400,
    "width": 500,
    "title": "Pie chart"
  }
}

渲染代码片段 #

import Plot from 'react-plotly.js';
...
<div style={{ width: "100%" }}>
  <Plot
    data={plotData.data}
    layout={{
      ...plotData.layout
    }}
    config={{ responsive: true }}
    useResizeHandler={true}
    style={{ width: "100%", height: "100%" }}
  />
</div>

以下是几个可尝试的修复方向：

• 调整title的格式兼容
  react-plotly.js@2.6.0对应的核心Plotly版本，对title的字符串格式支持可能存在兼容问题。可以将JSON里的字符串型title改为对象格式：

  "layout": {
    "height": 400,
    "width": 500,
    "title": {
      "text": "Pie chart"
    }
  }
  

  或者在React代码中自动转换格式，避免修改原始JSON：

  layout={{
    ...plotData.layout,
    title: typeof plotData.layout.title === 'string' ? { text: plotData.layout.title } : plotData.layout.title
  }}
  

• 排查容器样式与响应式设置冲突
  目前Plot组件同时设置了style={{ width: "100%", height: "100%" }}、responsive: true和useResizeHandler，可能导致标题被容器裁剪。可以尝试：

  • 给外层容器添加最小高度，比如<div style={{ width: "100%", minHeight: "500px" }}>
  • 暂时关闭responsive和useResizeHandler，测试标题是否显示，逐步定位问题

• 验证plotData的完整性
  在渲染前打印console.log(plotData.layout.title)，确认该值确实是"Pie chart"，未被其他代码意外修改或覆盖。

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