Highcharts grupo gráfico de columnas apiladas
Highcharts gráfico de columnas
El siguiente ejemplo demuestra grupo gráfico de columnas apiladas.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones. Añadir apilamiento propiedades en plotOptions en:
configuración
plotOptions: opciones de puntos de datos
plotOptions utilizan para establecer los puntos de datos gráfica propiedades relacionadas. plotOptions Según diversos tipos de gráficos, sus propiedades conjunto ligeramente diferente.
Tabla de valores de configuración de pila plotOptions.area.stacking como "ciento". Si deshabilita el uso de pila nula.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
Configuración Opción de columna de datos serie
Configuración en una pila para cada elemento de la columna de datos correspondiente.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}]
Ejemplos
Nombre del archivo: highcharts_column_rotated.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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>
La salida del ejemplo anterior es: