Diagramme à colonnes à mise en page fixe Highcharts

Diagramme à colonnes Highcharts

L'exemple suivant illustre un diagramme à barres à mise en page fixe.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de base de Highcharts. Ensuite, examinons d'autres configurations. Ajoutez les configurations pointPlacement et pointPadding sous series.

series.pointPadding

Contrôle la valeur de distance entre chaque colonne. Lorsque la largeur du graphique Highcharts est fixe, plus cette valeur est grande, plus la largeur des colonnes est petite, et inversement. La valeur par défaut est 0.1.

series.pointPlacement

Dans les graphiques à colonnes, lorsque pointPlacement est défini sur "on", les points sur l'axe X n'ont aucun espacement. Si pointPlacement est défini sur "between", les colonnes sont disposées en fonction des graduations.

Dans les versions après Highcharts 3.0.2, pointPlacement peut accepter des nombres. 0 est la valeur sur l'axe, -0.5 est l'intervalle entre la valeur actuelle et la valeur précédente, et 0.5 est l'intervalle entre la valeur actuelle et la valeur suivante. Contrairement aux options de réglage textuelles, les réglages numériques n'affectent pas l'espacement entre les axes.

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

Exemple

Nom du fichier : highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教程 | Example(example.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>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Efficiency Optimization by Branch'   
   };   
   var xAxis = {
      categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
   };
   var yAxis = [{
         min: 0,
         title: {
            text: 'Employees'
         }
      }, {
         title: {
            text: 'Profit (millions)'
         },
         opposite: true
   }];
   var legend = {
      shadow: false
   };
   var tooltip = {
      shared: true
   };
   var credits = {
      enabled: false
   };
   var plotOptions = {
      column: {
         grouping: false,
         shadow: false,
         borderWidth: 0
      }
   };
   var series= [{
       name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1      
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.credits = credits;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.series = series;
   $('#container').highcharts(json);
});

</script>
</body>
</html>

Le résultat de sortie de l'exemple ci-dessus est :

Diagramme à colonnes Highcharts

autres extensions