Highcharts - Graphique en aires utilisant des plages
Voici un exemple de graphique en aires utilisant des plages.
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 utilisant des plages. Nous verrons également des configurations supplémentaires.
Nous avons changé l'attribut type dans le graphique.
graphique
Configurez le type de graphique pour qu'il soit basé sur une plage. chart.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".
var chart = {
type: 'arearange'
};Exemple
highcharts_area_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/modules/data.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: 'arearange',
zoomType: 'x'
};
var title = {
text: 'Temperature variation by day'
};
var xAxis = {
type: 'datetime'
};
var yAxis = {
title: {
text: null
}
};
var tooltip = {
shared: true,
crosshairs: true,
valueSuffix: '\xB0C'
};
var legend = {
enabled: false
}
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?',
function (data) {
var series = [{
name: 'Temperatures',
data: data
}];
json.series = series;
$('#container').highcharts(json);
});
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.