You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
3.9 KiB
HTML
177 lines
3.9 KiB
HTML
2 months ago
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Highcharts Example</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
.highcharts-yaxis-grid .highcharts-grid-line {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script src="https://cdn.hcharts.cn/highcharts/5.0.9/highcharts.js"></script>
|
||
|
|
<script src="https://cdn.hcharts.cn/highcharts/5.0.9/highcharts-more.js"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.hcharts.cn/highcharts/5.0.9/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>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
var gaugeOptions = {
|
||
|
|
|
||
|
|
chart: {
|
||
|
|
type: 'solidgauge'
|
||
|
|
},
|
||
|
|
|
||
|
|
title: null,
|
||
|
|
|
||
|
|
pane: {
|
||
|
|
center: ['50%', '85%'],
|
||
|
|
size: '140%',
|
||
|
|
startAngle: -90,
|
||
|
|
endAngle: 90,
|
||
|
|
background: {
|
||
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
|
||
|
|
innerRadius: '60%',
|
||
|
|
outerRadius: '100%',
|
||
|
|
shape: 'arc'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
|
||
|
|
// the value axis
|
||
|
|
yAxis: {
|
||
|
|
stops: [
|
||
|
|
[0.1, '#55BF3B'], // green
|
||
|
|
[0.5, '#DDDF0D'], // yellow
|
||
|
|
[0.9, '#DF5353'] // red
|
||
|
|
],
|
||
|
|
lineWidth: 0,
|
||
|
|
minorTickInterval: null,
|
||
|
|
tickAmount: 2,
|
||
|
|
title: {
|
||
|
|
y: -70
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
y: 16
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
plotOptions: {
|
||
|
|
solidgauge: {
|
||
|
|
dataLabels: {
|
||
|
|
y: 5,
|
||
|
|
borderWidth: 0,
|
||
|
|
useHTML: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// The speed gauge
|
||
|
|
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
|
||
|
|
yAxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 200,
|
||
|
|
title: {
|
||
|
|
text: 'Speed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
name: 'Speed',
|
||
|
|
data: [80],
|
||
|
|
dataLabels: {
|
||
|
|
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||
|
|
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
|
||
|
|
'<span style="font-size:12px;color:silver">km/h</span></div>'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
valueSuffix: ' km/h'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
|
||
|
|
}));
|
||
|
|
|
||
|
|
// The RPM gauge
|
||
|
|
var chartRpm = Highcharts.chart('container-rpm', 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 point,
|
||
|
|
newVal,
|
||
|
|
inc;
|
||
|
|
|
||
|
|
if (chartSpeed) {
|
||
|
|
point = chartSpeed.series[0].points[0];
|
||
|
|
inc = Math.round((Math.random() - 0.5) * 100);
|
||
|
|
newVal = point.y + inc;
|
||
|
|
|
||
|
|
if (newVal < 0 || newVal > 200) {
|
||
|
|
newVal = point.y - inc;
|
||
|
|
}
|
||
|
|
|
||
|
|
point.update(newVal);
|
||
|
|
}
|
||
|
|
|
||
|
|
// RPM
|
||
|
|
if (chartRpm) {
|
||
|
|
point = chartRpm.series[0].points[0];
|
||
|
|
inc = Math.random() - 0.5;
|
||
|
|
newVal = point.y + inc;
|
||
|
|
|
||
|
|
if (newVal < 0 || newVal > 5) {
|
||
|
|
newVal = point.y - inc;
|
||
|
|
}
|
||
|
|
|
||
|
|
point.update(newVal);
|
||
|
|
}
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|