Highcharts gráfico de columnas apiladas usando porcentajes
Highcharts gráfico de columnas
El siguiente ejemplo demuestra el uso de el porcentaje de 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: 'percent'
}
};
Ejemplos
Nombre del archivo: highcharts_column_percentage.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: '堆叠柱形图'
};
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>
La salida del ejemplo anterior es: