Highcharts Medidor de volumen (VU Meter)

Highcharts Gráfico de medición

El siguiente ejemplo demuestra el medidor de volumen (VU Meter).

Ya hemos aprendido la sintaxis de configuración básica de Highcharts en los capítulos anteriores. A continuación, veamos otras configuraciones.

---

Configuración

Configuración de chart.type

Configure el type de chart como 'gauge'. chart.type describe el tipo de gráfico. El valor predeterminado es "line".

var chart = {
   type: 'gauge'
};

Configuración de pane

pane solo se aplica a gráficos polares y medidores de ángulo. Este objeto de configuración contiene las opciones generales para combinar el eje x y el eje y. Cada eje x y eje y puede asociarse al panel mediante un índice.

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

Ejemplo

Nombre de archivo: highcharts_vumeter.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(example.com)</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>   
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   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 json = {};   
   json.chart = chart; 
   json.credits = credits;
   json.title = title;       
   json.pane = pane; 
   json.yAxis = yAxis; 
   json.plotOptions = plotOptions;  
   json.series = series;      
   
   // Add some life
   var chartFunction = function (chart) {
      setInterval(function () {
         if (chart.series) { // the chart may be destroyed
            var left = chart.series[0].points[0],
            right = chart.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);
            chart.redraw();
         }
      }, 500);
   };
   
   $('#container').highcharts(json, chartFunction);  
});
</script>
</body>
</html>

El resultado del ejemplo anterior es:

Highcharts Gráfico de medición

Otras extensiones