Highcharts prozentual gestapeltes Flächendiagramm

Highcharts Flächendiagramm

Das folgende Beispiel zeigt ein prozentual gestapeltes Flächendiagramm.

Wir haben die grundlegende Konfigurationssyntax von Highcharts bereits in den vorherigen Kapiteln kennengelernt. Als Nächstes sehen wir uns weitere Konfigurationen an. Fügen Sie die Eigenschaft stacking in plotOptions hinzu:

Konfiguration

plotOptions: Datenpunktoptionen

plotOptions wird verwendet, um Eigenschaften für Datenpunkte im Diagramm festzulegen. Je nach Diagrammtyp unterscheiden sich die Eigenschaftseinstellungen für plotOptions geringfügig.

Setzen Sie die Diagramm-Stapelungsoption plotOptions.area.stacking auf "percent". Wenn die Stapelung deaktiviert ist, verwenden Sie null.

var plotOptions = {
   area: {
      stacking: 'percent',
      lineColor: '#666666',
      lineWidth: 1,
      marker: {
         lineWidth: 1,
         lineColor: '#666666'
      }
   }
};

Beispiel

Dateiname: highcharts_area_percentage.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: 'area'
   };
   var title = {
      text: 'Historic and Estimated Worldwide Population Growth by Region'   
   }; 
   var subtitle = {
      text: 'Source: Wikipedia.org'
   };
   var xAxis = {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
         enabled: false
      }
   };
   var yAxis = {
      title: {
         text: 'Billions'
      },
      labels: {
         formatter: function () {
            return this.value / 1000;
         }
      }
   };
   var tooltip = {
      shared: true,
      valueSuffix: ' millions'
   };
   var plotOptions = {
      area: {
         stacking: 'percent',
         lineColor: '#666666',
         lineWidth: 1,
         marker: {
            lineWidth: 1,
            lineColor: '#666666'
         }
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
       name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Selbst ausprobieren »

Die Ausgabe des obigen Beispiels ist:

Highcharts Flächendiagramm