Question

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

Answer 1

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

Currently the labels are automatically calculated based on maxValue, 'minValue' and segments. This may not be possible at all, as per the library functionality, there will be 5 values for your chart instead of 4 you have mentioned. I'm afraid this is not possible at all as far as I see. So I'm closing this issue.

有许多图书馆绘制图表，但每个图书馆都有其局限性，对于我的项目，我最终自己实施图表，它并不那么难，让你完全按照自己的需要做到怪异。

以下是我从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)

反应车速表或仪表。如何在反应中创建标记的速度表？

1 个答案: