如何以水平方式显示最小值和最大值？

Question

我用react-d3-speedometer包做速度计。我能够实现它。但这是最大值和最小值，我需要以水平方式显示。npm包

码

import React, { Component } from 'react';
import ReactSpeedometer from "react-d3-speedometer";

export default class GaugeChart extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <React.Fragment>
            <ReactSpeedometer
                maxValue={7000}
                value={7000}
                valueFormat=".1s"
                needleColor="red"
                startColor="#ffc7ba"
                segments={630}
                maxSegmentLabels={1}
                endColor="#FF471A"
            />
        </React.Fragment>
    }
}

当前视图

​

​

期望视图

​

Answer 1

使用下面的样式并在CSS文件中添加

 <style>
    text.segment-value:nth-child(1){
          font-size: 16px !important;
        font-weight: bold;
        fill: unset !important;
        transform: rotate(0deg) translate(-105px, 20px); 
     }

        text.segment-value:nth-child(2){
          font-size: 16px !important;
        font-weight: bold;
        fill: unset !important;
        transform: rotate(0deg) translate(105px, 20px);
        } 

</style>

OutPut：https://prnt.sc/q5vvzg

希望我已经澄清了你的答案！