highCharts 电流表、电压表 

 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>

 

 

posted @ 2013-08-30 11:58  Seaurl  阅读(1054)  评论(0)    收藏  举报