Highcharts gráfico de medidor circular de barra de progreso

Highcharts gráfico de medidor

El siguiente ejemplo demuestra el gráfico de medidor circular de barra de progreso.

En los capítulos anteriores ya hemos aprendido la sintaxis de configuración básica de Highcharts. Ahora veamos otras configuraciones.

---

Configuración

Configuración de chart.type

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

var chart = {
   type: 'solidguage'
};

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 ejes x e y. Cada eje x y cada eje y se puede asociar al panel mediante un índice.

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

Ejemplo

Nombre de archivo: highcharts_guage_solid.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>    
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
<script language="JavaScript">
$(document).ready(function() {  
   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, '#3B7DBF'], // 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 json = {};   
   json.chart = chart; 
   json.title = title;       
   json.pane = pane; 
   json.tooltip = tooltip; 
   json.yAxis = yAxis; 
   json.credits = credits; 
   json.series = series;     
   $('#container-speed').highcharts(json);   
   
   
   // the value axis
   yAxis = {
      stops: [
         [0.1, '#3B7DBF'], // 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'
      }
   }];
   
   json.yAxis = yAxis;   
   json.series = series;     
   $('#container-rpm').highcharts(json);  
   
   var chartFunction = function() {
      // Speed
      var chart = $('#container-speed').highcharts();
      var point;
      var newVal;
      var inc;

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

      // RPM
      chart = $('#container-rpm').highcharts();
      if (chart) {
         point = chart.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);
});
</script>
</body>
</html>

El resultado del ejemplo anterior es:

Highcharts gráfico de medidor

Otras extensiones