Highcharts grupo gráfico de colunas empilhadas
O exemplo a seguir demonstra grupo 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: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
configuração de itens coluna de dados série
Configuração em uma pilha para cada item coluna de dados correspondente.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}]
Exemplos
O nome do arquivo: 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>
O exemplo acima saída é: