React速度表/仪表盘开发：如何添加分段标签及求替代库

Great question! Let's cover both how to add segment labels to your existing react-d3-speedometer setup, plus some alternative libraries that make this feature easier to implement out of the box.

Since react-d3-speedometer doesn’t include built-in support for segment labels, you can add them by overlaying custom SVG text elements. Here’s a practical approach using React refs and angle calculations:

import React, { useRef, useEffect } from 'react';
import ReactSpeedometer from 'react-d3-speedometer';

const LabeledSpeedometer = () => {
  const speedometerContainer = useRef(null);
  // Define your segment ranges and corresponding labels
  const segmentRanges = [0, 25, 50, 75, 100];
  const segmentLabels = ['Low', 'Medium', 'High', 'Critical'];

  useEffect(() => {
    const svg = speedometerContainer.current?.querySelector('svg');
    if (!svg) return;

    const centerX = svg.clientWidth / 2;
    const centerY = svg.clientHeight / 2;
    // Adjust radius to position labels outside the gauge segments
    const labelRadius = (svg.clientHeight / 2) - 15;

    segmentLabels.forEach((label, idx) => {
      // Calculate midpoint angle for each segment (speedometer uses a 180-degree arc)
      const startPercent = segmentRanges[idx] / 100;
      const endPercent = segmentRanges[idx + 1] / 100;
      const midAngle = (startPercent + endPercent) * Math.PI - Math.PI / 2; // Convert to radians, offset for 0 at top

      // Calculate label position
      const x = centerX + labelRadius * Math.cos(midAngle);
      const y = centerY + labelRadius * Math.sin(midAngle);

      // Create SVG text element
      const labelElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      labelElement.setAttribute('x', x);
      labelElement.setAttribute('y', y);
      labelElement.setAttribute('text-anchor', 'middle');
      labelElement.setAttribute('font-size', '12px');
      labelElement.setAttribute('fill', '#2d3748');
      labelElement.textContent = label;

      svg.appendChild(labelElement);
    });
  }, []);

  return (
    <div ref={speedometerContainer}>
      <ReactSpeedometer
        value={60}
        segments={4}
        minValue={0}
        maxValue={100}
        width={320}
        height={220}
        segmentColors={['#8884d8', '#82ca9d', '#ffc658', '#ff8042']}
      />
    </div>
  );
};

export default LabeledSpeedometer;

You may need to tweak the labelRadius, font size, or angle offset to match your specific gauge dimensions and styling preferences.

If you’d prefer a library that handles segment labels natively (avoiding custom SVG work), here are three solid options:

1. react-gauge-chart #

A lightweight, customizable gauge library with native support for segment labels. It’s easy to set up:

import GaugeChart from 'react-gauge-chart';

const CustomGauge = () => {
  return (
    <GaugeChart
      id="labeled-gauge"
      nrOfLevels={4}
      percent={0.6} // Maps to 60% of max value
      labels={['Low', 'Medium', 'High', 'Critical']}
      labelFontSize="14px"
      arcWidth={0.3}
      colors={['#8884d8', '#82ca9d', '#ffc658', '#ff8042']}
    />
  );
};

2. Recharts Gauge Component #

Recharts is a robust charting library that offers flexible gauge customization. You can use the Tick component to add segment labels directly:

import { Gauge, Sector, Tick } from 'recharts';

const RechartsLabeledGauge = () => {
  const segmentData = [
    { name: 'Low', end: 25, color: '#8884d8' },
    { name: 'Medium', end: 50, color: '#82ca9d' },
    { name: 'High', end: 75, color: '#ffc658' },
    { name: 'Critical', end: 100, color: '#ff8042' },
  ];

  return (
    <Gauge width={320} height={220} value={60} min={0} max={100}>
      {segmentData.map((seg, idx) => (
        <Sector
          key={`sector-${idx}`}
          startAngle={idx === 0 ? -90 : ((segmentData[idx-1].end / 100) * 180) - 90}
          endAngle={(seg.end / 100) * 180 - 90}
          fill={seg.color}
        />
      ))}
      <Tick
        stroke="#2d3748"
        fontSize={12}
        tickFormatter={(val) => segmentData.find(s => s.end === val)?.name || ''}
        ticks={segmentData.map(s => s.end)}
      />
    </Gauge>
  );
};

3. react-svg-gauge #

A simple SVG-based gauge that lets you define segments with labels directly in the props:

import Gauge from 'react-svg-gauge';

const SvgLabeledGauge = () => {
  return (
    <Gauge
      value={60}
      min={0}
      max={100}
      width={320}
      height={220}
      segments={[
        { color: '#8884d8', label: 'Low', start: 0, end: 25 },
        { color: '#82ca9d', label: 'Medium', start: 25, end: 50 },
        { color: '#ffc658', label: 'High', start: 50, end: 75 },
        { color: '#ff8042', label: 'Critical', start: 75, end: 100 },
      ]}
      showLabels={true}
      labelFontSize="12px"
    />
  );
};

All these libraries handle label positioning automatically, saving you the hassle of manual SVG calculations.

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