Highcharts umgekehrtes Säulendiagramm mit negativen Werten

Highcharts Säulendiagramm

Das folgende Beispiel zeigt ein invertiertes Balkendiagramm mit negativen Werten.

In den vorherigen Kapiteln haben wir bereits die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an.

Konfiguration

Chart-Konfiguration

Setzen Sie das type-Attribut des Charts auf column; chart.type beschreibt den Diagrammtyp. Der Standardwert ist "line".

var chart = {
   type: 'column'
};

Beispiel

Dateiname: 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>

Selbst ausprobieren »

Das Ausgabeergebnis des obigen Beispiels ist:

Highcharts Säulendiagramm