Highcharts: gráfico de columnas apiladas con porcentaje

Highcharts: gráfico de columnas

El siguiente ejemplo demuestra un gráfico de columnas apiladas que utiliza porcentajes.

Ya hemos aprendido la sintaxis de configuración básica de Highcharts en capítulos anteriores. A continuación, veamos otras configuraciones. Agregue el atributo stacking en plotOptions:

---

Configuración

plotOptions: opciones de puntos de datos

plotOptions se utiliza para configurar las propiedades relacionadas con los puntos de datos en el gráfico. Las propiedades de plotOptions varían ligeramente según el tipo de gráfico.

Configure el apilamiento del gráfico estableciendo plotOptions.area.stacking en "percent". Use null para deshabilitar el apilamiento.

var plotOptions = {
   column: {
      stacking: 'percent'      
   }
};

Ejemplo

Nombre de archivo: highcharts_column_percentage.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(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 yAxis ={
      min: 0,
      title: {
        text: '水果总消费量'
      }
   };  
   var tooltip = {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
   };
   var plotOptions = {
      column: {
         stacking: 'percent'        
      }
   };
   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.yAxis = yAxis;   
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

El resultado del ejemplo anterior es:

Highcharts: gráfico de columnas

Otras extensiones