Highcharts 圆形进度条式测量图

一代码
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 圆形进度条式测量图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
<script language="JavaScript">
$(document).ready(function() {
   // 测量图
   var chart = {
      type: 'solidgauge'
   };
   var title = null;

   var pane = {
      // 面板的相对位置
      center: ['50%', '85%'],
      // 测试图的相对大小
      size: '140%',
      startAngle: -90,  // 起始角度
      endAngle: 90,  //结束角度
      // 背景
      background: {
         backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
         innerRadius: '60%',
         outerRadius: '100%',
         shape: 'arc'
      }
   };

   var tooltip = {
      enabled: false
   };

   //
   var yAxis = {
      stops: [
         [0.1, '#55BF3B'], // 绿色
         [0.5, '#DDDF0D'], // 黄色
         [0.9, '#DF5353'] // 红色
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
         y: -70
      },
      labels: {
         y: 16
      },
      min: 0,
      max: 200,
      title: {
         text: 'Speed'
      }
   };

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

   var credits = {
      enabled: false
   };

   var series = [{
      name: 'Speed',
      data: [80],
      dataLabels: {
         format: '<div style="text-align:center"><span style="font-size:25px;color:' +
         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
         '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
         valueSuffix: ' km/h'
      }
   }];

   var json = {};
   json.chart = chart;
   json.title = title;
   json.pane = pane;
   json.tooltip = tooltip;
   json.yAxis = yAxis;
   json.credits = credits;
   json.series = series;
   $('#container-speed').highcharts(json);




   var chartFunction = function() {
      // Speed
      var chart = $('#container-speed').highcharts();
      var point;
      var newVal;
      var inc;

      if (chart) {
         point = chart.series[0].points[0];
         inc = Math.round((Math.random() - 0.5) * 100);
         newVal = point.y + inc;

         if (newVal < 0 || newVal > 200) {
            newVal = point.y - inc;
         }
         // 动态变化
         point.update(newVal);
      }


   };

   // 定时器为2秒
   setInterval(chartFunction, 2000);
});
</script>
</body>
</html>
二运行结果
Highcharts 圆形进度条式测量图

猜你喜欢
