Highcharts - Grafico a scartamento con doppio asse

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico a scartamento con due assi.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

chart.type

Configurare il tipo di grafico in base al misuratore. Imposta il tipo come "indicatore".

var chart = {
   type: 'guage'
};

Pannello

Questo si applica solo alle carte polari e agli indicatori angolari. Questo oggetto di configurazione contiene le opzioni generali per il set di assi X e Y combinati. Ogni xAxis o yAxis può fare riferimento al riquadro in base all'indice.

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

Esempio

highcharts_guage_dualaxes.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://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: 'Speedometer with dual axes'
            };
            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>

Risultato

Verifica il risultato.

↰ Previous page