Highcharts groupe graphique à colonnes empilées
Highcharts graphique à colonnes
L'exemple suivant montre empilé groupe graphique à colonnes.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations. Ajouter empilement propriétés en plotOptions dans:
configuration
plotOptions: options de points de données
plotOptions utilisés pour définir les points de données du graphique des propriétés connexes. plotOptions Selon divers types de graphiques, leurs propriétés légèrement différentes.
les paramètres de configuration de la pile graphique plotOptions.area.stacking comme «pour cent». Si vous désactivez l'utilisation de la pile null.
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
série des données de configuration de l'élément de colonne
La configuration d'une pile pour chaque élément de colonne de données correspondante.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}]
Exemples
Nom du fichier: 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>
L'exemple ci-dessus sortie est: