html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<html>2
<head>3
<meta charset="UTF-8" />4
<title>Highcharts 教程 | 时代Java与您共同学习(NowJava.com)</title>5
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>6
<script src="https://code.highcharts.com/highcharts.js"></script>7
<script src="https://code.highcharts.com/highcharts-more.js"></script> 8
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>9
</head>10
<body>11
<div style="width: 600px; height: 400px; margin: 0 auto">12
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>13
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>14
</div>15
<script language="JavaScript">16
$(document).ready(function() { 17
var chart = { 18
type: 'solidgauge'19
};20
var title = null;21
22
var pane = {23
center: ['50%', '85%'],24
size: '140%',25
startAngle: -90,26
endAngle: 90,27
background: {28
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',29
innerRadius: '60%',30
outerRadius: '100%',31
shape: 'arc'32
}33
};34
35
var tooltip = {36
enabled: false37
};38
39
// the value axis40
var yAxis = {41
stops: [42
[0.1, '#55BF3B'], // green43
[0.5, '#DDDF0D'], // yellow44
[0.9, '#DF5353'] // red45
],46
lineWidth: 0,47
minorTickInterval: null,48
tickPixelInterval: 400,49
tickWidth: 0,50
title: {51
y: -7052
},53
labels: {54
y: 1655
},56
min: 0,57
max: 200,58
title: {59
text: 'Speed'60
}61
}; 62
63
var plotOptions = {64
solidgauge: {65
dataLabels: {66
y: 5,67
borderWidth: 0,68
useHTML: true69
}70
}71
};72
73
var credits = {74
enabled: false75
};76
77
var series = [{78
name: 'Speed',79
data: [80],80
dataLabels: {81
format: '<div style="text-align:center"><span style="font-size:25px;color:' +82
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +83
'<span style="font-size:12px;color:silver">km/h</span></div>'84
},85
tooltip: {86
valueSuffix: ' km/h'87
}88
}];89
90
var json = {}; 91
json.chart = chart; 92
json.title = title; 93
json.pane = pane; 94
json.tooltip = tooltip; 95
json.yAxis = yAxis; 96
json.credits = credits; 97
json.series = series; 98
$('#container-speed').highcharts(json); 99
100
101
// the value axis102
yAxis = {103
stops: [104
[0.1, '#55BF3B'], // green105
[0.5, '#DDDF0D'], // yellow106
[0.9, '#DF5353'] // red107
],108
lineWidth: 0,109
minorTickInterval: null,110
tickPixelInterval: 400,111
tickWidth: 0,112
title: {113
y: -70114
},115
labels: {116
y: 16117
},118
min: 0,119
max: 5,120
title: {121
text: 'RPM'122
}123
}; 124
125
series = [{126
name: 'RPM',127
data: [1],128
dataLabels: {129
format: '<div style="text-align:center"><span style="font-size:25px;color:' +130
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +131
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'132
},133
tooltip: {134
valueSuffix: ' revolutions/min'135
}136
}];137
138
json.yAxis = yAxis; 139
json.series = series; 140
$('#container-rpm').highcharts(json); 141
142
var chartFunction = function() {143
// Speed144
var chart = $('#container-speed').highcharts();145
var point;146
var newVal;147
var inc;148
149
if (chart) {150
point = chart.series[0].points[0];151
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java