Highcharts 圆形进度条式测量图

下图是一个 Highcharts 圆形进度条式测量图

配置

配置属性 chart.type 为 'solidguage' 即可将图表显示为 圆形进度条式测量图
```
 var chart = {
    type: 'solidguage'
 };
```
配置属性 pane

属性 pane 只适用在极坐标图和角度测量仪

pane 属性可配置对象持有组合 x 轴和 y 周的常规选项

每个 x 轴和 y 轴都可以通过索引关联到窗格中

pane.startAngle 是 x 轴或测量轴的开始度数，以度数的方式给出，0 是北

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

范例

下面的代码列出了 Highcharts 圆形进度条式测量图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/solid-gauge.js"></script>
<div style="width: 580px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 290px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 290px; height: 200px; float: left"></div>
</div>
<script> 
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 options = {};

options.chart = chart;
options.title = title;
options.pane = pane;
options.yAxis = yAxis;
options.series = series;
options.tooltip = tooltip;
options.credits = credits;

var chart1 = Highcharts.chart('container-speed',options);   

// 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'
   }
}];

var chart2;
      
var chartFunction = function() {

   var point;
   var newVal;
   var inc;

   if (chart1) {
      point = chart1.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);
   }


   if (chart2) {
      point = chart2.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);

options.yAxis = yAxis;
options.series = series;

var chart2 = Highcharts.chart('container-rpm',options);
</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 区间柱形图 Highcharts 曲线面积图 →

Highcharts 圆形进度条式测量图

配置

范例

学习 Hightcharts