Highcharts velocímetro de doble eje

Highcharts 测量图 Highcharts gráfico de medición

El siguiente ejemplo demuestra un velocímetro de doble eje.

Hemos visto la sintaxis de configuración básica de Highcharts en capítulos anteriores. A continuación, veamos otras configuraciones.

Configuración

Configuración de chart.type

Configura 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 angulares. Este objeto de configuración contiene las opciones generales para combinar los ejes x e y. Cada eje x y eje y puede asociarse a un panel mediante un índice.

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

Ejemplo

Nombre de archivo: highcharts_guage_dualaxes.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',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false     
   };
   var credits = {
      enabled: false
   };

   var title = {
      text: '双轴车速表'
   };

   var pane = {
      startAngle: -150,
      endAngle: 150
   };

   // the value axis
   var yAxis = [{
      min: 0,
      max: 200,
      lineColor: '#339',
      tickColor: '#339',
      minorTickColor: '#339',
      offset: -25,
      lineWidth: 2,
      labels: {
         distance: -20,
         rotation: 'auto'
      },
      tickLength: 5,
      minorTickLength: 5,
      endOnTick: false
   }, {
      min: 0,
      max: 124,
      tickPosition: 'outside',
      lineColor: '#933',
      lineWidth: 2,
      minorTickPosition: 'outside',
      tickColor: '#933',
      minorTickColor: '#933',
      tickLength: 5,
      minorTickLength: 5,
      labels: {
         distance: 12,
         rotation: 'auto'
      },
      offset: -20,
      endOnTick: false
   }];
   
   var series= [{
      name: 'Speed',
      data: [80],
      dataLabels: {
         formatter: function () {
            var kmh = this.y,
            mph = Math.round(kmh * 0.621);
            return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
               '<span style="color:#933">' + mph + ' mph</span>';
         },
         backgroundColor: {
            linearGradient: {
               x1: 0,
               y1: 0,
               x2: 0,
               y2: 1
            },
            stops: [
               [0, '#DDD'],
               [1, '#FFF']
            ]
         }
      },
      tooltip: {
         valueSuffix: ' km/h'
      }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.credits = credits;
   json.title = title;       
   json.pane = pane; 
   json.yAxis = yAxis;    
   json.series = series;      
   
   // Add some life
   var chartFunction = function (chart) {
      setInterval(function () {
         var point = chart.series[0].points[0],
         newVal,
         inc = Math.round((Math.random() - 0.5) * 20);

         newVal = point.y + inc;
         if (newVal < 0 || newVal > 200) {
            newVal = point.y - inc;
         }
         point.update(newVal);
      }, 3000);
   };
   
   $('#container').highcharts(json, chartFunction);  
});
</script>
</body>
</html>

El resultado del ejemplo anterior es: