Highcharts Columnas de grupo apiladas
Highcharts Gráfico de columnas
El siguiente ejemplo demuestra un gráfico de columnas de grupo apiladas.
Ya hemos aprendido la sintaxis de configuración básica de Highcharts en los capítulos anteriores. Ahora 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. Según los distintos tipos de gráfico, la configuración de sus propiedades varía ligeramente.
Configurar el apilado del gráfico estableciendo plotOptions.area.stacking en "percent". Si desea deshabilitar el apilado, use null.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
series: configuración de elementos de la serie de datos
Configure cada elemento de datos correspondiente en el grupo apilado.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}]
Ejemplo
Nombre de archivo: highcharts_column_rotated.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: 'Total fruit consumption, grouped by gender'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
};
var plotOptions = {
column: {
stacking: 'normal'
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
El resultado del ejemplo anterior es:
Otras extensiones