Highcharts - Graphique en aires avec axes inversés
Voici un exemple de graphique en aires avec des axes inversés.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant un exemple de graphique en aires avec des axes inversés. Nous comprendrons également la configuration supplémentaire et ajouterons un attribut inversé dans le graphique.
graphique
Configurez l'inversé du graphique comme vrai.
Configurez les axes à inverser. Quandtrue x axis est vertical et y axisest horizontal. Si une série de barres est présente dans le graphique, la même chose sera inversée. Ici, la valeur par défaut est false.
var chart = {
type: 'area',
inverted: true
};Exemple
highcharts_area_inverted.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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: 'area',
inverted: true
};
var title = {
text: 'Average fruit consumption during one week'
};
var subtitle = {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (
Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
'#FFFFFF'
};
var xAxis = {
categories: ['Monday','Tuesday','Wednesday','Thursday',
'Friday','Saturday','Sunday']
};
var yAxis = {
title: {
text: 'Number of units'
},
labels: {
formatter: function () {
return this.value;
}
},
min: 0
};
var plotOptions = {
area: {
fillOpacity: 0.5
}
};
var credits = {
enabled: false
};
var series = [
{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
},
{
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.