HighCharts 嵌套仪表盘
效果图
要点
- 使用多个DIV绘制不同表盘，并设置背景色透明以叠加
chart: {
backgroundColor: 'rgba(0,0,0,0)'
},
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="resources/js/highcharts.js"></script>
<script src="resources/js/highcharts-more.js"></script>
<script src="resources/js/solid-gauge.js"></script>
<script>
function render() {
const boxW = 300, boxH = 300,
axisFontW = 13;
Highcharts.setOptions({
title: null,
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
});
var chart1 = Highcharts.chart('container-1', {
chart: {
type: 'solidgauge',
backgroundColor: 'rgba(0,0,0,0)'
},
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: -135,
endAngle: -45,
background: [{
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc'
}]
},
yAxis: [{
min: 0,
max: 200,
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
text: '载荷',
x: -boxW / 2 + axisFontW
},
stops: [
[0.1, '#DF5353'], // red
[0.3, '#DDDF0D'], // yellow
[0.5, '#55BF3B'], // green
[0.7, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}],
credits: {
enabled: false
},
series: [{
name: '载荷',
data: [{
radius: '100%',
innerRadius: '90%',
y: 100
}],
dataLabels: {
align: 'center',
x: -boxW / 2,
y: boxH / 4,
format: '<div style="text-align:center"><span style="font-size:16px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
});
var chart2 = Highcharts.chart('container-2', {
chart: {
type: 'solidgauge',
backgroundColor: 'rgba(0,0,0,0)'
},
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 135,
endAngle: 45,
background: [{
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc'
}]
},
yAxis: [{
min: 0,
max: 200,
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
text: '编制',
x: boxW / 2 - axisFontW * 1.5
},
stops: [
[0.1, '#DF5353'], // red
[0.3, '#DDDF0D'], // yellow
[0.5, '#55BF3B'], // green
[0.7, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}],
credits: {
enabled: false
},
series: [{
name: '编制',
data: [{
radius: '100%',
innerRadius: '90%',
y: 100
}],
dataLabels: {
align: 'center',
x: boxW / 2,
y: boxH / 4,
format: '<div style="text-align:center"><span style="font-size:16px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
});
var chart3 = Highcharts.chart('container-3', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'rgba(0,0,0,0)'
},
pane: {
center: ['50%', '50%'],
size: '70%',
startAngle: -120,
endAngle: 120,
background: [{
backgroundColor: {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '106%'
}, {
backgroundColor: {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '104%'
}, {
outerRadius: '104%'
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '102%',
innerRadius: '100%'
}]
},
yAxis: [{
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: '效率'
},
plotBands: [{
from: 0,
to: 40,
color: '#DF5353' // red
}, {
from: 40,
to: 80,
color: '#DDDF0D' // yellow
}, {
from: 80,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
}],
credits: {
enabled: false
},
series: [{
name: '效率',
data: [{
radius: '100%',
innerRadius: '90%',
y: 0
}],
dataLabels: {
align: 'center',
format: '<div style="text-align:center"><span style="font-size:16px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
});
// 定时刷新数据
setInterval(function () {
var point,
newVal,
inc,
v1, v2;
if (chart1) {
point = chart1.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 10);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
v1 = point.y;
}
if (chart2) {
point = chart2.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 10);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
v2 = point.y;
}
if (chart3) {
point = chart3.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 10);
newVal = Math.round(100 * v1 / v2);
if (newVal < 0) {
newVal = 0;
} else if (newVal > 200) {
newVal = 200;
}
point.update(newVal);
}
}, 100);
}
</script>
</head>
<body onload="render()">
<div style="width: 300px; height: 300px; margin: auto">
<div id="container-1" style="position: absolute;width: 300px; height: 300px; float: left"></div>
<div id="container-2" style="position: absolute;width: 300px; height: 300px; float: left"></div>
<div id="container-3" style="position: absolute;width: 300px; height: 300px; float: left"></div>
</div>
</body>
</html>
