highCharts 电流表、电压表

时间:2023-03-09 09:07:55
highCharts 电流表、电压表
 var highChartsSettingV = {
chart: {
margin: [5, 2, 5, 8],
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0 },
//设置默认背景着色
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg',
height: 150
}, //去掉highcharts.com商标
credits: {
enabled: false
}, //去掉chart不必要属性
exporting: {
enabled: false
},
title: null, pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['52%', '155%'],
size: 330
}
], //设置charts显示样式
yAxis: [{
min: 0,//最小数值
max: 65,//最大数值
minorTickPosition: 'outside',
minorTickInterval: 'auto', tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 25,
color: '#55BF3B' // green
}, {
from: 25,
to: 50,
color: '#DDDF0D' // yellow
}, {
from: 50,
to: 65,
color: '#DF5353' // red
}],
pane: 0,
title: {
text: '<span style="font-size:8px">输出电流</span>',
y: -40
}
}], plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
}, //设置指针指向值
series: [{
data: [10],
yAxis: 0
}]
};
$('#ssxx-v').highcharts(highChartsSettingV);
<div id="ssxx-v" class="ssxx-column1"></div>

highCharts 电流表、电压表