<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 非常正面