Highcharts - Graphique à jauge avec deux axes

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique à jauge avec deux axes est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

chart.type

Configurez le type de graphique pour qu'il soit basé sur une jauge. Définissez le type comme «jauge».

var chart = {
   type: 'guage'
};

vitre

Cela s'applique uniquement aux cartes polaires et aux jauges angulaires. Cet objet de configuration contient des options générales pour l'ensemble d'axes X et Y combinés. Chaque xAxis ou yAxis peut référencer le volet par index.

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

Exemple

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>

Résultat

Vérifiez le résultat.

↰ Previous page