首页 | 简单教程,简单编程

代码编辑器：

<!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
      }
}];

// 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>

代码编辑器：

运行结果：