Plotly React：能否分别设置图表与图例宽度（图表80%/图例20%）

可以实现，下面提供两种可行方案来达成「图表占80%宽度、图例占剩余20%」的效果：

方案一：利用Plotly原生布局配置 #

通过调整布局的边距和图例属性，让图例占据右侧固定比例的空间，图表自动适配剩余区域：

import React from 'react';
import Plot from 'react-plotly.js';

const CustomWidthChart = () => {
  const data = [
    { x: [1,2,3], y: [4,5,6], name: '系列1', type: 'scatter' },
    { x: [1,2,3], y: [7,8,9], name: '系列2', type: 'scatter' }
  ];

  const layout = {
    width: '100%', // 让图表容器继承父元素宽度
    margin: {
      r: 200, // 右侧预留图例空间，根据需求调整
      l: 50, t: 50, b: 50
    },
    legend: {
      width: 180, // 图例宽度，对应20%占比（需和父容器宽度匹配）
      x: 1, xanchor: 'right', // 将图例定位到容器最右侧
      y: 0.5, yanchor: 'middle'
    }
  };

  return (
    <div style={{ width: '100%', maxWidth: '1200px' }}>
      <Plot data={data} layout={layout} />
    </div>
  );
};

export default CustomWidthChart;

注意：这里的margin.r和legend.width需要根据父容器的实际宽度调整，确保图例刚好占20%空间。如果父容器宽度是响应式的，可以通过useEffect监听容器宽度变化，动态计算并设置这些值。

方案二：用CSS Flex布局拆分图表与图例 #

通过Flex布局将容器拆分为两部分，分别控制图表和自定义图例的宽度，这种方式能精确控制比例，且支持完全自定义图例样式：

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

const FlexLayoutChart = () => {
  const [visibleTraces, setVisibleTraces] = useState([true, true]);
  const data = [
    {
      x: [1,2,3], y: [4,5,6], name: '系列1', type: 'scatter',
      visible: visibleTraces[0], marker: { color: '#1f77b4' }
    },
    {
      x: [1,2,3], y: [7,8,9], name: '系列2', type: 'scatter',
      visible: visibleTraces[1], marker: { color: '#ff7f0e' }
    }
  ];

  const layout = {
    width: '100%',
    margin: { l: 50, t: 50, b: 50, r: 20 }
  };

  const toggleTrace = (index) => {
    const newVisible = [...visibleTraces];
    newVisible[index] = !newVisible[index];
    setVisibleTraces(newVisible);
  };

  return (
    <div style={{ display: 'flex', width: '100%', maxWidth: '1200px' }}>
      {/* 图表容器占80%宽度 */}
      <div style={{ width: '80%' }}>
        <Plot data={data} layout={layout} />
      </div>
      {/* 自定义图例容器占20%宽度 */}
      <div style={{ 
        width: '20%', 
        display: 'flex', 
        flexDirection: 'column', 
        justifyContent: 'center', 
        padding: '0 15px'
      }}>
        {data.map((trace, index) => (
          <div 
            key={index}
            style={{ 
              display: 'flex', 
              alignItems: 'center', 
              margin: '10px 0',
              cursor: 'pointer',
              opacity: visibleTraces[index] ? 1 : 0.6
            }}
            onClick={() => toggleTrace(index)}
          >
            <div 
              style={{ 
                width: '16px', 
                height: '16px', 
                backgroundColor: trace.marker.color,
                marginRight: '10px'
              }}
            />
            <span>{trace.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FlexLayoutChart;

优缺点对比：

• 方案一：依赖Plotly原生图例，无需额外开发交互逻辑，实现简单，但宽度适配需要手动调整参数，适合需求不复杂的场景。
• 方案二：完全控制布局比例，图例样式可高度定制，但需要自己实现图例的交互（比如点击切换系列显示），适合需要个性化图例的场景。

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