Google Charts - Graphique de base en chandeliers
Voici un exemple de graphique de base en chandeliers. Un graphique en chandeliers est généralement utilisé pour afficher une valeur d'ouverture et de clôture qui sont superposées à une variance totale. Les graphiques en chandeliers sont souvent utilisés pour montrer le comportement de valeur des actions. Dans ce graphique, des cases remplies sont dessinées pour les éléments dont la valeur d'ouverture est inférieure à la valeur de clôture (un gain) et, et des cases vides sont dessinées où la valeur d'ouverture de l'élément est supérieure à la valeur de clôture (une perte). 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é CandlestickChart classe pour afficher le graphique basé sur des chandeliers.
//candlestick chart
var chart = new google.visualization.CandlestickChart
(document.getElementById('container'));Exemple
googlecharts_candlestick_basic.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([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Set chart options
var options = {legend: 'none'};
// Instantiate and draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.