reactjs - react 车速表或仪表。如何在 react 中创建标记的速度计？

Question

我使用这个库来绘制速度计。 https://github.com/palerdot/react-d3-speedometer 我想在每个段上设置标签。如果有其他库可以绘制这样的图表，请帮忙。

Answer 1

根据该问题的答案，这是不可行的:Is it possible to set label on segments

目前，标签是根据 maxValue、'minValue' 和段自动计算的。这可能根本不可能，根据库功能，您的图表将有 5 个值，而不是您提到的 4 个。恐怕据我所知这是根本不可能的。所以我要关闭这个问题。

有很多库可以绘制图表，但每个库都有其局限性，对于我的项目，我最终自己实现了图表，这并不难，可以让您准确地完成您需要的操作，而不会遇到怪癖。

这是我从 ReactPie component 中提取的一些代码，它绘制了一个 PieSegment，因此您可以使用它轻松创建与仪表类似的结果。你可以用那支笔试试:https://codepen.io/leefsmp/pen/dJjpXx

class ReactPieSegment extends React.Component {

    constructor (props) {

      super (props)
    }

    generatePathDef(centre, rIn, rOut, start, delta) {

      const endRad = start + delta

      const startOut = {
        x: centre.x + rOut * Math.cos(start),
        y: centre.y + rOut * Math.sin(start)
      }

      const endOut = {
        x: centre.x + rOut * Math.cos(endRad),
        y: centre.y + rOut * Math.sin(endRad)
      }

      const startIn = {
        x: centre.x + rIn * Math.cos(endRad),
        y: centre.y + rIn * Math.sin(endRad)
      };

      var endIn = {
        x: centre.x + rIn * Math.cos(start),
        y: centre.y + rIn * Math.sin(start)
      }

      const largeArc = delta > Math.PI ? 1 : 0

      return (
        `M${startOut.x},${startOut.y}` +
        ` A${rOut},${rOut} 0 ` +
        `${largeArc},1 ${endOut.x},${endOut.y}` +
        ` L${startIn.x},${startIn.y}` +
        ` A${rIn},${rIn} 0 ` +
        `${largeArc},0 ${endIn.x},${endIn.y}` +
        ` L${startOut.x},${startOut.y} Z`
      )
    }

    render () {

      const {
        fillColor, strokeColor,
        start, delta,
        rIn, rOut,
        centre
      } = this.props

      const pathDef = this.generatePathDef(
        centre, rIn, rOut, start, delta)

      const labelDist = rIn + 1.2 * (rOut-rIn)

      const labelRad = start + 0.5 * delta

      const labelPos = {
        x: centre.x + labelDist * Math.cos (labelRad) - 10,
        y: centre.y + labelDist * Math.sin (labelRad)
      }

      const labelStyle = {
        transform: `translate(${labelPos.x}px, ${labelPos.y}px)`
      }

      return (
        <g className='react-pie-segment'>
          <path
            stroke={strokeColor}
            fill={fillColor}
            d={pathDef}
          />
          <text style={labelStyle}>
            {this.props.label}
          </text>
        </g>
      )
    }
  }


  class Demo extends React.Component {

    constructor (props) {
      super (props)
    }

    render() {
      return (
        <div className="demo">
          <svg>
          <ReactPieSegment
            centre={{x:150, y:150}}
            strokeColor={"green"}
            fillColor={"green"}
            delta={Math.PI/4}
            start={Math.PI}
            label={"label 1"}
            rOut={90}
            rIn={50}
          />
          <ReactPieSegment
            centre={{x:150, y:150}}
            strokeColor={"yellow"}
            fillColor={"yellow"}
            delta={Math.PI/4}
            start={5*Math.PI/4}
            label={"label 2"}
            rOut={90}
            rIn={50}
          /> 
          <ReactPieSegment
            centre={{x:150, y:150}}
            strokeColor={"orange"}
            fillColor={"orange"}
            delta={Math.PI/4}
            start={6*Math.PI/4}
            label={"label 3"}
            rOut={90}
            rIn={50}
          /> 
          <ReactPieSegment
            centre={{x:150, y:150}}
            strokeColor={"red"}
            fillColor={"red"}
            delta={Math.PI/4}
            start={7*Math.PI/4}
            label={"label 4"}
            rOut={90}
            rIn={50}
          /> 
          </svg>  
        </div>
      )
    }
  }

  const root = document.getElementById('root')

  ReactDOM.render(<Demo/>, root)