Graphique en aires ayant des valeurs négatives
Voici un exemple de graphique en aires avec des valeurs négatives. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé area configuration pour afficher le graphique basé sur la zone.
//area chart
var chart = new google.visualization.AreaChart(document.getElementById('container'));Exemple
googlecharts_area_negative.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', -1170, 460],
['2015', -660, 1120],
['2016', 1030, 540]
]);
var options = {
isStacked: true,
title: 'Population',
hAxis: {title: 'Year',titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
// Instantiate and draw the chart.
var chart = new google.visualization.AreaChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.