Highcharts mise en page fixe bar chart

Précédent: Highcharts groupe graphique à colonnes empilées

Suivant: Highcharts HTML données de la table à l' aide d' un graphique à barres

L'exemple suivant montre une barre de mise en page fixe graphique.

Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations. Ajouter dans la configuration pointPlacement et pointPadding série.

series.pointPadding

Commander la distance entre la valeur de chaque colonne, lorsque la largeur Highcharts de graphique est fixe, plus la valeur est inférieure à la largeur de la colonne, alors que l'inverse. La valeur par défaut est de 0,1

series.pointPlacement

Dans un graphique à colonnes, lorsque pointPlacement réglé sur "on", l'axe X du point pas d'intervalle. Si pointPlacement réglé sur «entre», entre les colonnes par mise à l'échelle.

Version 3.0.2 après Highcharts, pointPlacement peut prendre en charge, la valeur 0 de l'axe numérique, la valeur courante de -0,5 et une valeur de l'intervalle précédent et de la valeur actuelle de 0,5 pour la valeur de l'intervalle suivant. Contrairement aux options de réglage de texte, le réglage numérique ne modifie pas l'intervalle entre les axes.

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

Exemples

Nom du fichier: highcharts_column_fixed.htm

<html>
<head>
<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>  
</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>

L'exemple ci-dessus sortie est: