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>