圆形进度条式测量图

Highcharts 测量图Highcharts 测量图

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

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

配置

chart.type 配置

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

var chart = {
   type: ''solidguage''
};
w^3^x^u^e.com提供本在线速查手册，请勿盗用！

pane 配置

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

var pane = {
  startAngle: -150,  // x轴或测量轴的开始度数，以度数的方式给出。0是北
  endAngle: 150      //x轴极坐标或角度轴的最终度数，以度数的方式给出。0是北
};
w^3^x^u^e.com提供本在线速查手册，请勿盗用！

实例

文件名：highcharts_guage_solid.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/hc/highcharts5.0.6.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>
w^3^x^u^e.com提供本在线速查手册，请勿盗用！

我来试一下

以上实例输出结果为：

Highcharts 测量图Highcharts 测量图