Highcharts 音量表（VU Meter）

下图是一个 Highcharts 音量表

配置

配置属性 chart.type 为 'gauge' 即可将图表显示为 音量表
```
 var chart = {
    type: 'guage'
 };
```
配置属性 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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script>

var chart = {      
   type: 'gauge',
   plotBorderWidth: 1,
   plotBackgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
      stops: [
         [0, '#FFF4C6'],
         [0.3, '#FFFFFF'],
         [1, '#FFF4C6']
      ]
   },
   plotBackgroundImage: null,
   height: 200
};
var credits = {
   enabled: false
};

var title = {
   text: '音量表（VU Meter）'
};

var pane = [{
      startAngle: -45,
      endAngle: 45,
      background: null,
      center: ['25%', '145%'],
      size: 300
   }, {
      startAngle: -45,
      endAngle: 45,
      background: null,
      center: ['75%', '145%'],
      size: 300
}];

var yAxis = [{
      min: -20,
      max: 6,
      minorTickPosition: 'outside',
      tickPosition: 'outside',
      labels: {
         rotation: 'auto',
         distance: 20
      },
      plotBands: [{
         from: 0,
         to: 6,
         color: '#C02316',
         innerRadius: '100%',
         outerRadius: '105%'
      }],
      pane: 0,
      title: {
         text: 'VU<br/><span style="font-size:8px">Channel A</span>',
         y: -40
      }
   }, {
      min: -20,
      max: 6,
      minorTickPosition: 'outside',
      tickPosition: 'outside',
      labels: {
         rotation: 'auto',
         distance: 20
      },
      plotBands: [{
         from: 0,
         to: 6,
         color: '#C02316',
         innerRadius: '100%',
         outerRadius: '105%'
      }],
      pane: 1,
      title: {
         text: 'VU<br/><span style="font-size:8px">Channel B</span>',
         y: -40
      }
}];

var plotOptions = {
   gauge: {
         dataLabels: {
         enabled: false
      },
      dial: {
         radius: '100%'
      }
   }
};
var series= [{
     data: [-20],
     yAxis: 0
  }, {
     data: [-20],
     yAxis: 1
}];     


var chart1;

// Add some life
var chartFunction = function (chart1) {
   setInterval(function () {
      if (chart1.series) { // the chart may be destroyed
         var left = chart1.series[0].points[0],
         right = chart1.series[1].points[0],
         leftVal,
         rightVal,
         inc = (Math.random() - 0.5) * 3;

         leftVal =  left.y + inc;
         rightVal = leftVal + inc / 3;
         if (leftVal < -20 || leftVal > 6) {
            leftVal = left.y - inc;
         }
         if (rightVal < -20 || rightVal > 6) {
            rightVal = leftVal;
         }

         left.update(leftVal, false);
         right.update(rightVal, false);
         chart1.redraw();
      }
   }, 500);
};

var options = {};

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

chart1 = Highcharts.chart('container',options,chartFunction);
</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 反向柱形图 Highcharts 每秒更新曲线图 →

Highcharts 音量表（VU Meter）

配置

范例

学习 Hightcharts