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

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

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

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

how to show min and max value in horizontal manner?

javascript

css

npm

reactjs

react-d3-speedometer