1 var highChartsSettingV = {
2 chart: {
3 margin: [5, 2, 5, 8],
4 type: 'gauge',
5 plotBorderWidth: 1,
6 plotBackgroundColor: {
7 linearGradient: { x1: 0, y1: 0 },
8 //设置默认背景着色
9 stops: [
10 [0, '#FFF4C6'],
11 [0.3, '#FFFFFF'],
12 [1, '#FFF4C6']
13 ]
14 },
15 plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg',
16 height: 150
17 },
18
19 //去掉highcharts.com商标
20 credits: {
21 enabled: false
22 },
23
24 //去掉chart不必要属性
25 exporting: {
26 enabled: false
27 },
28 title: null,
29
30 pane: [{
31 startAngle: -45,
32 endAngle: 45,
33 background: null,
34 center: ['52%', '155%'],
35 size: 330
36 }
37 ],
38
39 //设置charts显示样式
40 yAxis: [{
41 min: 0,//最小数值
42 max: 65,//最大数值
43 minorTickPosition: 'outside',
44 minorTickInterval: 'auto',
45
46 tickPosition: 'outside',
47 labels: {
48 rotation: 'auto',
49 distance: 20
50 },
51 plotBands: [{
52 from: 0,
53 to: 25,
54 color: '#55BF3B' // green
55 }, {
56 from: 25,
57 to: 50,
58 color: '#DDDF0D' // yellow
59 }, {
60 from: 50,
61 to: 65,
62 color: '#DF5353' // red
63 }],
64 pane: 0,
65 title: {
66 text: '<span style="font-size:8px">输出电流</span>',
67 y: -40
68 }
69 }],
70
71
72 plotOptions: {
73 gauge: {
74 dataLabels: {
75 enabled: false
76 },
77 dial: {
78 radius: '100%'
79 }
80 }
81 },
82
83 //设置指针指向值
84 series: [{
85 data: [10],
86 yAxis: 0
87 }]
88 };
$('#ssxx-v').highcharts(highChartsSettingV);
<div id="ssxx-v" class="ssxx-column1"></div>
