我想在实心仪表上显示温度和湿度计。问题是他们有不同的范围。
温度-15到40摄氏度 湿度0至100%
是否可以在显示它们的位置构建一个实心仪表?
修改
我花了几个小时就完成了这件事,这就是我所拥有的http://jsfiddle.net/1ttsant0/6/
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '90%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: [{
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
min: -20,
max: 30,
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
text: 'Temperature',
y: -85
},
labels: {
x: 0,
y: 16
}
}, {
min: 0,
max: 100,
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
text: 'Humidity',
y: -70
},
labels: {
x: 18,
y: 15
}
}],
credits: {
enabled: false
},
series: [{
name: 'Temperature',
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
data: [45],
yAxis: 0,
dataLabels: {
x: 0,
y: -10,
allowOverlap: true,
format: '<div style="text-align:center"><span style="font-size:25px;color: black">{y} °C</span></div>'
},
innerRadius:'70%',
radius: '100%'
}, {
name: 'Humidity',
data: [100],
yAxis: 1,
allowOverlap: true,
dataLabels: {
x: 0,
y: 5,
format: '<div style="text-align:center"><span style="font-size:15px;color: gray;">{y} %</span>'
},
innerRadius:'60%',
radius: '70%'
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
point1 = chart.series[1].points[0];
inc = Math.round((Math.random() - 0.5) * 10);
newVal = point.y + inc;
if (newVal < -35 || newVal > 45) {
newVal = point.y - inc;
}
//point.update(newVal);
newVal = point1.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point1.y - inc;
}
point1.update(newVal);
}
}, 2000);
});
&#13;
<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 style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
&#13;
问题仍然很少: