jquery结合Highcharts插件实现动态数据仪表盘图形化显示效果
仪表盘显示效果如图：
方法一效果图：
方法二效果图（插件版本4.0.1）：
js代码如下：
1 $(function(){ 2 3 //方法一： 4 5 var chart = new Highcharts.Chart({ 6 7 chart: { 8 9 renderTo: 'container', 10 11 type: 'gauge' 12 13 // backgroundColor: "#f3f3f3" 14 15 }, 16 17 18 19 title: { 20 21 text: 'CPU使用情况（%）' 22 23 }, 24 25 26 27 pane: { 28 29 startAngle: -150, 30 31 endAngle: 150, 32 33 background: [{ 34 35 backgroundColor: '#DDD', 36 37 borderWidth: 0, 38 39 outerRadius: '107%', 40 41 innerRadius: '103%' 42 43 }] 44 45 }, 46 47 48 49 // the value axis 50 51 yAxis: { 52 53 min: 0, 54 55 max: 100, 56 57 58 59 minorTickInterval: 'auto', 60 61 minorTickWidth: 1, 62 63 minorTickLength: 10, 64 65 minorTickPosition: 'inside', 66 67 minorTickColor: '#444', 68 69 70 71 tickPixelInterval: 60, 72 73 tickWidth: 2, 74 75 tickPosition: 'inside', 76 77 tickLength: 10, 78 79 tickColor: '#444', 80 81 labels: { 82 83 step: 2, 84 85 rotation: 'auto' 86 87 }, 88 89 title: { 90 91 text: '%', 92 93 style: { 94 95 color: '#08c', 96 97 fontSize: "18px" 98 99 } 100 101 }, 102 103 plotBands: [{ 104 105 from: 0, 106 107 to: 60, 108 109 color: '#55BF3B' // green 110 111 }, { 112 113 from: 60, 114 115 to: 80, 116 117 color: '#DDDF0D' // yellow 118 119 }, { 120 121 from: 80, 122 123 to: 100, 124 125 color: '#DF5353' // red 126 127 }] 128 129 }, 130 131 132 133 credits: { 134 135 enabled: false 136 137 }, 138 139 140 141 series: [{ 142 143 name: 'CPU使用率', 144 145 color: '#08c', 146 147 data: [80], 148 149 tooltip: { 150 151 valueSuffix: ' %' 152 153 } 154 155 }] 156 157 158 159 }, 160 161 // Add some life 162 163 function(chart) { 164 165 setInterval(function() { 166 167 var point = chart.series[0].points[0], 168 169 newVal, 170 171 inc = Math.round((Math.random() - 0.5) * 10); 172 173 174 175 newVal = point.y + inc; 176 177 if (newVal < 0 || newVal > 100) { 178 179 newVal = point.y - inc; 180 181 } 182 183 point.update(newVal); 184 185 186 187 }, 3000); 188 189 }); 190 191 //方法二： 192 193 var gaugeOptions = { 194 195 chart: { 196 type: 'solidgauge' 197 }, 198 199 title: null, 200 201 pane: { 202 center: ['50%', '50%'], 203 size: '100%', 204 startAngle: -90, 205 endAngle: 270, 206 borderWidth: 1, 207 background: { 208 backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#fff', 209 innerRadius: '60%', 210 outerRadius: '100%', 211 shape: 'arc' 212 } 213 }, 214 215 tooltip: { 216 enabled: false 217 }, 218 219 credits: { 220 enabled: false 221 }, 222 223 // the value axis 224 225 yAxis: { 226 stops: [ 227 [0.5, '#55BF3B'], // green 228 [0.7, '#DDDF0D'], // yellow 229 [0.9, '#DF5353'] // red 230 ], 231 lineWidth: 1, 232 minorTickInterval: null, 233 tickPixelInterval: 360, 234 tickWidth: 0, 235 title: { 236 y: 30 237 }, 238 labels: { 239 enabled: false 240 } 241 }, 242 243 plotOptions: { 244 solidgauge: { 245 dataLabels: { 246 y: 0, 247 borderWidth: 0, 248 useHTML: true 249 } 250 } 251 } 252 }; 253 254 // CPU使用率 255 $('#SYS_DIV_cpuChart').highcharts(Highcharts.merge(gaugeOptions, { 256 yAxis: { 257 min: 0, 258 max: 100, 259 title: { 260 text: 'CPU使用率' 261 } 262 }, 263 264 series: [{ 265 name: 'CPU使用率', 266 data: [0], 267 dataLabels: { 268 format: '<div style="text-align:center;font-size:20px;"><span style="color:' + 269 ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#0092FF') + '">{y}</span>' + 270 '<span style="color:#0092FF">%</span></div>' 271 }, 272 tooltip: { 273 valueSuffix: ' %' 274 } 275 }] 276 277 })); 278 279 280 281 })
html代码如下：
1 <script type="text/javascript" src="js/highcharts.js"></script> 2 <script type="text/javascript" src="js/highcharts-more.js"></script> 3 4 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>