Google Charts - Graphique de calendrier personnalisé
Voici un exemple de graphique de calendrier personnalisé. Un graphique de calendrier est utilisé pour visualiser des données sur une période de temps. 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é calendar configuration pour personnaliser le calendrier.
// Set chart options
var options = {
calendar: {
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
}
}
};Exemple
googlecharts_calendar_customized.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','calendar']});
</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 = new google.visualization.DataTable();
data.addColumn({ type: 'date', id: 'Date' });
data.addColumn({ type: 'number', id: 'Students' });
data.addRows([
[ new Date(2012, 3, 13), 50 ],
[ new Date(2012, 3, 14), 50 ],
[ new Date(2012, 3, 15), 49 ],
[ new Date(2012, 3, 16), 48 ],
[ new Date(2012, 3, 17), 50 ],
[ new Date(2012, 4, 1), 50 ],
[ new Date(2012, 4, 2), 50 ],
[ new Date(2012, 4, 3), 49 ],
[ new Date(2012, 4, 4), 48 ],
[ new Date(2012, 4, 5), 50 ],
[ new Date(2012, 5, 4), 40 ],
[ new Date(2012, 5, 5), 50 ],
[ new Date(2012, 5, 10), 48 ],
[ new Date(2012, 5, 11), 50 ],
[ new Date(2012, 5, 12), 42 ],
[ new Date(2012, 5, 20), 45 ],
[ new Date(2012, 5, 21), 46 ],
[ new Date(2012, 5, 29), 45 ],
[ new Date(2013, 3, 13), 40 ],
[ new Date(2013, 3, 14), 40 ],
[ new Date(2013, 3, 15), 39 ],
[ new Date(2013, 3, 16), 38 ],
[ new Date(2013, 3, 17), 40 ],
[ new Date(2013, 4, 1), 40 ],
[ new Date(2013, 4, 2), 40 ],
[ new Date(2013, 4, 3), 49 ],
[ new Date(2013, 4, 4), 48 ],
[ new Date(2013, 4, 5), 40 ],
[ new Date(2013, 5, 4), 40 ],
[ new Date(2013, 5, 5), 50 ],
[ new Date(2013, 5, 12), 48 ],
[ new Date(2013, 5, 13), 40 ],
[ new Date(2013, 5, 19), 32 ],
[ new Date(2013, 5, 23), 45 ],
[ new Date(2013, 5, 24), 36 ],
[ new Date(2013, 5, 30), 45 ]
]);
// Set chart options
var options = {
'title':'Attendence',
'width':550,
'height':400,
calendar: {
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
}
}
};
// Instantiate and draw the chart.
var chart = new google.visualization.Calendar(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.