jquery结合Highcharts插件实现动态数据仪表盘图形化显示效果

仪表盘显示效果如图：

方法一效果图：

方法二效果图（插件版本4.0.1）：

​

js代码如下：

 $(function(){

 //方法一：

     var chart = new Highcharts.Chart({

 chart: {

                 renderTo: 'container',

                 type: 'gauge'

                 // backgroundColor: "#f3f3f3"

             },

             title: {

                 text: 'CPU使用情况（%）'

             },

             pane: {

                 startAngle: -150,

                 endAngle: 150,

                 background: [{

                     backgroundColor: '#DDD',

                     borderWidth: 0,

                     outerRadius: '107%',

                     innerRadius: '103%'

                 }]

             },

             // the value axis

             yAxis: {

                 min: 0,

                 max: 100,

                 minorTickInterval: 'auto',

                 minorTickWidth: 1,

                 minorTickLength: 10,

                 minorTickPosition: 'inside',

                 minorTickColor: '#444',

                 tickPixelInterval: 60,

                 tickWidth: 2,

                 tickPosition: 'inside',

                 tickLength: 10,

                 tickColor: '#444',

                 labels: {

                     step: 2,

                     rotation: 'auto'

                 },

                 title: {

                     text: '%',

                     style: {

                         color: '#08c',

                         fontSize: "18px"

                     }

                 },

                 plotBands: [{

                     from: 0,

                     to: 60,

                     color: '#55BF3B' // green

                 }, {

                     from: 60,

                     to: 80,

                     color: '#DDDF0D' // yellow

                 }, {

                     from: 80,

                     to: 100,

                     color: '#DF5353' // red

                 }]

             },

             credits: {

                 enabled: false

             },

             series: [{

                 name: 'CPU使用率',

                 color: '#08c',

                 data: [80],

                 tooltip: {

                     valueSuffix: ' %'

                 }

             }]

         },

         // Add some life

         function(chart) {

             setInterval(function() {

                 var point = chart.series[0].points[0],

                     newVal,

                     inc = Math.round((Math.random() - 0.5) * 10);

                 newVal = point.y + inc;

                 if (newVal < 0 || newVal > 100) {

                     newVal = point.y - inc;

                 }

                 point.update(newVal);

             }, 3000);

         });

 //方法二：

 var gaugeOptions = {

             chart: {
                 type: 'solidgauge'
             },

             title: null,

             pane: {
                 center: ['50%', '50%'],
                 size: '100%',
                 startAngle: -90,
                 endAngle: 270,
                 borderWidth: 1,
                 background: {
                     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#fff',
                     innerRadius: '60%',
                     outerRadius: '100%',
                     shape: 'arc'
                 }
             },

             tooltip: {
                 enabled: false
             },

             credits: {
                 enabled: false
             },

             // the value axis

             yAxis: {
                 stops: [
                     [0.5, '#55BF3B'], // green
                     [0.7, '#DDDF0D'], // yellow
                     [0.9, '#DF5353'] // red
                 ],
                 lineWidth: 1,
                 minorTickInterval: null,
                 tickPixelInterval: 360,
                 tickWidth: 0,
                 title: {
                     y: 30
                 },
                 labels: {
                     enabled: false
                 }
             },

             plotOptions: {
                 solidgauge: {
                     dataLabels: {
                         y: 0,
                         borderWidth: 0,
                         useHTML: true
                     }
                 }
             }
         };

         // CPU使用率
         $('#SYS_DIV_cpuChart').highcharts(Highcharts.merge(gaugeOptions, {
             yAxis: {
                 min: 0,
                 max: 100,
                 title: {
                     text: 'CPU使用率'
                 }
             },

             series: [{
                 name: 'CPU使用率',
                 data: [0],
                 dataLabels: {
                     format: '<div style="text-align:center;font-size:20px;"><span style="color:' +
                         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#0092FF') + '">{y}</span>' +
                         '<span style="color:#0092FF">%</span></div>'
                 },
                 tooltip: {
                     valueSuffix: ' %'
                 }
             }]

         }));

 })

html代码如下：

 <script type="text/javascript" src="js/highcharts.js"></script>
 <script type="text/javascript" src="js/highcharts-more.js"></script>

 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>