如何在Plotly.js中实现仪表盘图表的圆角边缘？

看起来你在给Plotly的仪表盘组件设置圆角时遇到了麻烦——直接用CSS属性不生效，调整stroke-width只能得到轻微效果。这是因为Plotly的仪表盘（gauge）组件的样式需要通过Plotly自身的配置参数或者修改生成的SVG元素来调整，而不是直接给React组件加CSS样式。下面分两种情况给出解决方案：

一、给仪表盘背景容器设置完全圆角 #

如果你的需求是让整个仪表盘的白色背景容器变成圆角，Plotly的gauge配置里自带了borderradius参数，直接配置即可：

修改你的gauge对象，添加borderradius属性（可以根据需要调整数值）：

gauge: {
  axis: { range: [0, 100], tickwidth: 0, tickformat: '', tickcolor: 'transparent', },
  bar: { color: 'gray', thickness: 0.9, },
  bgcolor: 'white',
  borderradius: 15, // 控制圆角大小，数值越大圆角越明显
  border: { width: 0 }, // 如果不需要显示边框，设置width为0即可
},

这个方法不需要额外的CSS或DOM操作，直接通过Plotly的配置就能实现背景容器的圆角效果。

二、给仪表盘的填充条（Bar）设置两端圆角 #

如果你的需求是让灰色的填充条两端变成圆角，Plotly目前没有直接的配置参数支持，需要通过修改Plotly生成的SVG元素来实现。可以用React的useRef和useEffect来操作DOM：

修改后的完整代码： #

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

const AngularGaugeChart = () => {
  const plotRef = useRef<Plot>(null); // 创建Plot组件的ref
  const data: any = [
    {
      domain: { x: [0, 1], y: [0, 1], },
      value: 96,
      title: { text: 'Tempture', font: { size: 24 }, },
      type: 'indicator',
      mode: 'gauge+number',
      gauge: {
        axis: { range: [0, 100], tickwidth: 0, tickformat: '', tickcolor: 'transparent', },
        bar: { color: 'gray', thickness: 0.9, },
        bgcolor: 'white',
      },
    },
  ];
  const layout = {
    autosize: true,
    margin: { t: 0, b: 0, l: 50, r: 50, },
    paper_bgcolor: '#262626',
    font: { color: '#fff', family: 'Roboto', },
  };

  useEffect(() => {
    if (plotRef.current) {
      // 获取Plot的容器元素
      const plotContainer = plotRef.current.getContainer();
      // 找到仪表盘填充条的SVG路径元素
      const gaugeBar = plotContainer.querySelector('path.trace.indicator.gauge-bar');
      if (gaugeBar) {
        // 设置SVG的圆角属性，rx/ry控制圆角大小
        gaugeBar.setAttribute('rx', '8');
        gaugeBar.setAttribute('ry', '8');
        // 强制Plotly重绘，确保样式生效
        Plotly.redraw(plotRef.current.getDiv());
      }
    }
  }, [data]); // 数据更新时重新执行

  return (
    <>
      <Plot
        ref={plotRef} // 绑定ref
        style={{ width: '50%', height: '50%', margin: 'auto' }}
        useResizeHandler={true}
        data={data}
        layout={layout}
      />
    </>
  );
};

export default AngularGaugeChart;

说明： #

• 我们通过useRef获取Plot组件的实例，然后在useEffect中找到生成的SVG路径元素（对应填充条）。
• SVG的rx和ry属性控制路径的圆角大小，你可以根据需要调整数值。
• 最后调用Plotly.redraw()确保样式更新生效。

另外，你之前尝试的stroke-linejoin和stroke-linecap属性是针对SVG描边的圆角，而填充条的圆角需要用rx/ry属性，这也是为什么之前的CSS设置没生效的原因。

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