Gráfico de medidor de Highcharts

Highcharts 测量图 Gráfico de medidor de Highcharts

El siguiente ejemplo demuestra un gráfico de medidor.

En los capítulos anteriores ya hemos aprendido la sintaxis básica de configuración de Highcharts. 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: 'guage'
};

Configuración de pane

pane solo se aplica a gráficos polares y medidores angulares. Este objeto configurable contiene las opciones generales para combinar los ejes x e y. Cada eje x y eje y puede vincularse a un panel mediante un índice.

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

Ejemplo

Nombre de archivo: highcharts_guage_angular.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 title = {
      text: '车速表'   
   };     

   var pane = {
      startAngle: -150,
      endAngle: 150,
      background: [{
         backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0, '#FFF'],
               [1, '#333']
            ]
         },
         borderWidth: 0,
         outerRadius: '109%'
      }, {
         backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0, '#333'],
               [1, '#FFF']
            ]
         },
         borderWidth: 1,
         outerRadius: '107%'
     }, {
         // default background
     }, {
         backgroundColor: '#DDD',
         borderWidth: 0,
         outerRadius: '105%',
         innerRadius: '103%'
     }]
   };

   // the value axis
   var yAxis = {
      min: 0,
      max: 200,

      minorTickInterval: 'auto',
      minorTickWidth: 1,
      minorTickLength: 10,
      minorTickPosition: 'inside',
      minorTickColor: '#666',

      tickPixelInterval: 30,
      tickWidth: 2,
      tickPosition: 'inside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
         step: 2,
         rotation: 'auto'
      },
      title: {
         text: 'km/h'
      },
      plotBands: [{
         from: 0,
         to: 120,
         color: '#3B7DBF' // green
      }, {
         from: 120,
         to: 160,
         color: '#DDDF0D' // yellow
      }, {
         from: 160,
         to: 200,
         color: '#DF5353' // red
      }]
   };

   var series= [{
        name: 'Speed',
        data: [80],
        tooltip: {
           valueSuffix: ' km/h'
        }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.pane = pane; 
   json.yAxis = yAxis; 
   json.series = series;     
   
   // Add some life
   var chartFunction = function (chart) {
      if (!chart.renderer.forExport) {
         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: