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

Question

我正在将react-d3-speedometer包用于速度计。我能够实现它。但是它是最大值和最小值，我需要水平显示。 npm package

代码

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>

输出：https://prnt.sc/q5vvzg

希望我已经明确您的答案！