highchart 儀表圖

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container-speed" class="container"></div>

.container {
  min-width: 310px; 
  max-width: 400px; 
  height: 300px; 
  margin: 0 auto;
}

tspan {
  font-size: inherit;
  color: inherit;
}

.verybad {
  color: #C00000;
  border-color: #C00000;
}

.bad {
  color: #E16100;
  border-color: #E16100;
}

.neutral {
  color: #FFC000;
  border-color: #FFC000;
}

.good {
  color: #D8Bf1A;
  border-color: #D8Bf1A;
}

.verygood {
  color: #9BBB59;
  border-color: #9BBB59;
}

.badge {
  font-size: 12px;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 2px;
  vertical-align: middle;
}

.voice-num {
  vertical-align: middle;
}

const testData=[43];

var speedOptions={

    chart:{
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
    },
        
    title: {
        text: '網路聲量'
    },
  
    pane: {
        startAngle: -90,
        endAngle: 90,
        background: null
    },
  
    exporting: { 
        enabled: false 
    },
  
    credits: {
        enabled: false
    },
        
    plotOptions: {
        gauge: {
            dataLabels: {
                borderColor: "none",
                useHTML: true,
                style: {
                    fontSize: "20px",
                }
                
            },
            dial: {
                baseLength: '0%',
                baseWidth: 10,
                radius: '100%',
                rearLength: '0%',
                topWidth: 1
            }
        }
    },
           
    // the value axis
    yAxis: {
        labels: {
            y: 10
        },
        tickPositions: [-50, 0, 50],
        minorTickLength: 0,
        min: -50,
        max: 50,
        plotBands: [{
            from: -50,
            to: 50,
            // color: '#C00000', // red
            color: {
                linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
                stops: [
                    [0.2, '#C00000'],
                    // #E16100
                    [0.5, '#FFC000'],
                    //#D8Bf1A
                    [0.7, '#9BBB59'],
                ]
            },
            thickness: '50%'
        }]
    },
    
    series: [{
        name: 'Speed',
        data: testData,
        dataLabels: {
            formatter: function(){
                let badge='';
                switch(true) {
                    case (this.y<-34):
                        //-35 -36 -37
                        badge='非常負面';
                        break;
                    case (this.y<-4):
                        //-34 -33 -32 ... -5
                        badge='較負面';
                        break;
                    case (this.y<5):
                        //-4 -3 ... 3 4
                        badge='中立';
                        break;
                    case (this.y<35):
                        //5 6 ... 33 34
                        badge='較正面';
                        break;
                    case (this.y<50):
                        badge='非常正面';
                }
            
                return `${this.y}分 ${badge}`
            }
        }
    }],
 
    tooltip: {
        enabled: false,
    },
 
};
Highcharts.chart('container-speed', speedOptions);

// -5 ~ +5 中立
// 5 ~ 35  較正面
// 35 ~ 50 非常正面

CODEPEN