Highcharts 圆形进度条式测量图

Highcharts 测量图Highcharts 测量图

以下实例演示了圆形进度条式测量图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。

配置

chart.type 配置

配置 chart 的 type 为 'solidguage' 。chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: 'solidguage'
};

pane 配置

pane 只适用在极坐标图和角度测量仪。此可配置对象持有组合x轴和y周的常规选项。每个x轴和y轴都可以通过索引关联到窗格中。

var pane = {
  startAngle: -150,  // x轴或测量轴的开始度数，以度数的方式给出。0是北
  endAngle: 150      //x轴极坐标或角度轴的最终度数，以度数的方式给出。0是北
};

实例

文件名：highcharts_guage_solid.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</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
   };
      
   // the value axis
   var yAxis = {
      stops: [
         [0.1, '#55BF3B'], // green
         [0.5, '#DDDF0D'], // yellow
         [0.9, '#DF5353'] // red
      ],
      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);   
   
   
   // the value axis
   yAxis = {
      stops: [
         [0.1, '#55BF3B'], // green
         [0.5, '#DDDF0D'], // yellow
         [0.9, '#DF5353'] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
         y: -70
      },
      labels: {
         y: 16
      },
	  min: 0,
      max: 5,
      title: {
         text: 'RPM'
      }
   };	  
   
   series = [{
      name: 'RPM',
      data: [1],
      dataLabels: {
         format: '<div style="text-align:center"><span style="font-size:25px;color:' +
         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
         '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
      },
      tooltip: {
         valueSuffix: ' revolutions/min'
      }
   }];
   
   json.yAxis = yAxis;   
   json.series = series;     
   $('#container-rpm').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);
      }

      // RPM
      chart = $('#container-rpm').highcharts();
      if (chart) {
         point = chart.series[0].points[0];
         inc = Math.random() - 0.5;
         newVal = point.y + inc;

         if (newVal < 0 || newVal > 5) {
            newVal = point.y - inc;
         }

         point.update(newVal);
      }
   };   
   
   // Bring life to the dials
   setInterval(chartFunction, 2000);
});
</script>
</body>
</html>

尝试一下 »

以上实例输出结果为：

Highcharts 测量图Highcharts 测量图