Highcharts - Graphique à jauge solide

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 solide 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 sur «solidguage».

var chart = {
   type: 'solidguage'
};

vitre

Ce type 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_solid.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>
      <script src = "https://code.highcharts.com/modules/solid-gauge.js"></script>
   </head>
   
   <body>
      <div style = "width: 600px; height: 400px; margin: 0 auto">
         <div id = "container-speed" style = "width: 300px; height: 200px; float: left">
         </div>
         <div id = "container-rpm" style = "width: 300px; height: 200px; float: left">
         </div>
      </div>
      
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {      
               type: 'solidgauge'
            };
            var title = null;
            
            var pane = {
               center: ['50%', '85%'],
               size: '140%',
               startAngle: -90,
               endAngle: 90,
               
               background: {
                  backgroundColor: (
                     Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                  
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
               }
            };
            var tooltip = {
               enabled: false
            };
            
            // the value axis
            var yAxis = {
               stops: [
                  [0.1, '#55BF3B'], // green
                  [0.5, '#DDDF0D'], // yellow
                  [0.9, '#DF5353'] // red
               ],
               lineWidth: 0,
               minorTickInterval: null,
               tickPixelInterval: 400,
               tickWidth: 0,
               title: {
                  y: -70
               },
               labels: {
                  y: 16
               },
               min: 0,
               max: 200,
               title: {
                  text: 'Speed'
               }
            };
            var plotOptions = {
               solidgauge: {
                  dataLabels: {
                     y: 5,
                     borderWidth: 0,
                     useHTML: true
                  }
               }
            };
            var credits = {
               enabled: false
            };
            var series = [{
               name: 'Speed',
               data: [80],
               dataLabels: {
                  format: '<div style = "text-align:center"><span style = "font-size:25px;color:' +
                     ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') +
                     '">{y}</span><br/>' +
                     '<span style = "font-size:12px;color:silver">km/h</span></div>'
               },
               tooltip: {
                  valueSuffix: ' km/h'
               }
            }];
	  
            var json = {};   
            json.chart = chart; 
            json.title = title;       
            json.pane = pane; 
            json.tooltip = tooltip; 
            json.yAxis = yAxis; 
            json.credits = credits; 
            json.series = series;     
            $('#container-speed').highcharts(json);   
            
            // the value axis
            yAxis = {
               stops: [
                  [0.1, '#55BF3B'], // green
                  [0.5, '#DDDF0D'], // yellow
                  [0.9, '#DF5353'] // red
               ],
               lineWidth: 0,
               minorTickInterval: null,
               tickPixelInterval: 400,
               tickWidth: 0,
               title: {
                  y: -70
               },
               labels: {
                  y: 16
               },
               min: 0,
               max: 5,
               title: {
                  text: 'RPM'
               }
            };	  
            series = [{
               name: 'RPM',
               data: [1],
               dataLabels: {
                  format: '<div style = "text-align:center"> <span style = "font-size:25px;color:' +
                     ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') +
                     '">{y:.1f}</span><br/>' +
                     '<span style = "font-size:12px;color:silver">* 1000 / min</span></div>'
               },
               tooltip: {
                  valueSuffix: ' revolutions/min'
               }
            }];
   
            json.yAxis = yAxis;   
            json.series = series;     
            $('#container-rpm').highcharts(json);  

            var chartFunction = function() {
               // Speed
               var chart = $('#container-speed').highcharts();
               var point;
               var newVal;
               var inc;

               if (chart) {
                  point = chart.series[0].points[0];
                  inc = Math.round((Math.random() - 0.5) * 100);
                  newVal = point.y + inc;

                  if (newVal < 0 || newVal > 200) {
                     newVal = point.y - inc;
                  }
                  point.update(newVal);
               }

               // RPM
               chart = $('#container-rpm').highcharts();
               
               if (chart) {
                  point = chart.series[0].points[0];
                  inc = Math.random() - 0.5;
                  newVal = point.y + inc;

                  if (newVal < 0 || newVal > 5) {
                     newVal = point.y - inc;
                  }
                  point.update(newVal);
               }
            };   
               
            // Bring life to the dials
            setInterval(chartFunction, 2000);
         });
      </script>
   </body>
   
</html>

Résultat

Vérifiez le résultat.

↰ Previous page