Latest web development tutorials

Highcharts biassiale tachimetro

Highcharts piano di indagine Highcharts piano di indagine

L'esempio seguente mostra biassiale tachimetro.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.

configurazione

Configurazione chart.type

Configurare il tipo di grafico 'calibro'. chart.type descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'gauge'
};

configurare riquadro

pannello è disponibile solo in diagramma polare e l'angolo strumento di misura. Questo oggetto configurabile detiene opzioni generali combinazione asse x e y-settimana. Ogni asse X e Y possono essere collegati al riquadro per indice. 

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

Esempi

Nome file: highcharts_guage_dualaxes.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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>

L'output sopra esempio è:

Highcharts piano di indagine Highcharts piano di indagine