Latest web development tutorials

Highcharts biaxial Tacho

Highcharts Wägungsdurchführungsplan Highcharts Wägungsdurchführungsplan

Das folgende Beispiel zeigt biaxial Tachometer.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen.


Konfiguration

chart.type Konfiguration

Konfigurieren Sie den Typ des Diagramms 'gauge'. chart.type beschreibt den Diagrammtyp. Der Standardwert ist "Linie".

var chart = {
   type: 'gauge'
};

Konfigurieren Bereich

Scheibe ist in Polarplot und Winkelmessgerät zur Verfügung. Dieses konfigurierbare Objekt enthält allgemeine Optionen Kombination x-Achse und y-Woche. Jede x-Achse und y-Achse kann mit der Scheibe durch den Index verknüpft werden.

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

Beispiele

Dateiname: 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>

Das obige Beispiel Ausgabe lautet:

Highcharts Wägungsdurchführungsplan Highcharts Wägungsdurchführungsplan