Highcharts utilisent inverse graphique à colonnes négative
Highcharts graphique à colonnes
L'exemple suivant illustre l'utilisation d'un graphique à colonnes négative inverse.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations.
configuration
configuration graphique
Réglage de la colonne d'attribut de type de graphique, chart.type décrit le type de graphique. La valeur par défaut est "en ligne".
var chart = {
type: 'column'
};
Exemples
Nom du fichier: highcharts_column_negative.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 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.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
L'exemple ci-dessus sortie est: