Graphique à colonnes en ordre inverse Highcharts avec valeurs négatives

Diagramme à colonnes Highcharts

L'exemple suivant illustre un graphique à barres inversées utilisant des valeurs négatives.

Dans les chapitres précédents, nous avons déjà appris la syntaxe de configuration de base de Highcharts. Examinons maintenant d'autres configurations.

Configuration

Configuration du graphique

Définissez l'attribut type du graphique sur column ; chart.type décrit le type de graphique. La valeur par défaut est "line".

var chart = {
   type: 'column'
};

Exemple

Nom du fichier : highcharts_column_negative.htm

<html>
<head>
<meta charset="UTF-8" />
<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: '使用负值的反向柱形图'   
   };   
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var credits = {
      enabled: false
   };
   var series= [{
      name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.credits = credits;
   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