See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen.
* 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js)
Highcharts.chart('chart', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
},
pane: {
startAngle: -90,
endAngle: 89.9,
background: null,
center: ['50%', '90%'],
size: '150%',
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 300,
tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
minorTickInterval: null,
labels: {
enabled: false
},
lineWidth: 0,
plotBands: [{
from: 0,
to: 100,
color: '#90e14c',
thickness: 100
}, {
from: 100,
to: 200,
color: '#f5b93d',
thickness: 100
}, {
from: 200,
to: 300,
color: '#f54a3d',
thickness: 100
}]
},
series: [{
name: '단계 텍스트',
type: 'pie',
borderColor: 'transparent', // Transparent border color
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '95%'], // 야매로 맞춤
size: '160%', // 야매로 맞춤
enableMouseTracking: false, // 차트에 mouseover 액션 false
data: [{
y: 1,
name: '1',
color: 'transparent'
}, {
y: 1,
name: '2',
color: 'transparent'
}, {
y: 1,
name: '3',
color: 'transparent'
}],
dataLabels: {
distance: -50,
format: '{point.name}단계',
style: {
fontSize: '14px',
color: '#000',
textOutline: 'none'
}
}
},
{
name: '시리즈',
data: [230],
dataLabels: {
enabled: false
},
dial: {
radius: '60%',
backgroundColor: '07080b',
baseWidth: 12,
baseLength: '0%',
rearLength: '0%'
},
pivot: {
backgroundColor: '07080b',
radius: 6
}
}
]
});
728x90
'퍼블리싱 > highchart' 카테고리의 다른 글
5단계 gauage chart highchart 5steps guage chart (0) | 2023.09.14 |
---|---|
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) (0) | 2023.09.14 |
간단한 multi yAxis 차트 highchart dual + multi yAxis chart (0) | 2023.09.14 |
비교 차트 highchart compare chart (0) | 2023.09.13 |
일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) (0) | 2023.09.13 |