Highcharts - Graphique à colonnes utilisant des plages
Voici un exemple de graphique à colonnes utilisant des plages.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .
Un exemple de graphique à colonnes utilisant des plages est donné ci-dessous.
Configurations
Voyons maintenant des configurations supplémentaires.
graphique
Configurez le type de graphique pour qu'il soit basé sur une plage de colonnes. chart.typedécide du type de série du graphique. La valeur par défaut est "ligne".
var chart = {
type: 'columnrange',
inverted: true
};Exemple
highcharts_column_range.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>
<script src = "https://code.highcharts.com/highcharts-more.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: 'columnrange',
inverted:true
};
var title = {
text: 'Temperature variation by month'
};
var subtitle = {
text: 'Observed in Vik i Sogn, Norway, 2009'
};
var xAxis = {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug',
'Sep','Oct','Nov','Dec']
};
var yAxis = {
title: {
text: 'Temperature ( \xB0C )'
}
};
var tooltip = {
headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
'<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '\xB0C';
}
}
}
};
var credits = {
enabled: false
};
var series = [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.