Highcharts empilhadas gráfico de colunas usando porcentagens
O exemplo seguinte demonstra o uso de a percentagem de gráfico de colunas empilhadas.
Na seção anterior nós já sabemos Highcharts sintaxe de configuração básica. Vamos olhar para as outras configurações. Adicionar empilhamento imóveis em plotOptions em:
configuração
plotOptions: opções de pontos de dados
plotOptions usado para definir os pontos de dados do gráfico propriedades relacionadas. plotOptions De acordo com vários tipos de gráficos, as suas propriedades conjunto ligeiramente diferente.
definições de configuração de pilha Gráfico plotOptions.area.stacking como "cento". Se você desativar o uso da pilha nulo.
var plotOptions = {
column: {
stacking: 'percent'
}
};
Exemplos
O nome do arquivo: 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>
O exemplo acima saída é: