diff options
| -rw-r--r-- | pages/propos-chine.vue | 3 | ||||
| -rw-r--r-- | static/chart.html | 41 |
2 files changed, 43 insertions, 1 deletions
diff --git a/pages/propos-chine.vue b/pages/propos-chine.vue index f60e8fb..eb1122b 100644 --- a/pages/propos-chine.vue +++ b/pages/propos-chine.vue @@ -15,7 +15,8 @@ <p>Xi Jinping</p> <img src="~/assets/img/Xi_Jinping_2019.jpg" width="10%" height="10%" /> <h2>La population en Chine</h2> - <p>Population est 1,440,722,001</p> + <p>Population est 1,439,323,776</p> + <iframe :src="'/chart.html'" frameborder="0" height="605px" width="100%" /> <h2>Les langues en Chine</h2> <p>Voici les langues chinoises surtout parlées:</p> <ul> diff --git a/static/chart.html b/static/chart.html new file mode 100644 index 0000000..5c44b0c --- /dev/null +++ b/static/chart.html @@ -0,0 +1,41 @@ +<html> + <head> + <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> + <script type="text/javascript"> + google.charts.load('current', {packages: ['corechart', 'bar']}); + google.charts.setOnLoadCallback(drawBasic); + +function drawBasic() { + + var data = google.visualization.arrayToDataTable([ + ['Pays', 'Population en 2020',], + ['Chine', 1439323776], + ['Inde', 1380004385], + ['États-Unis', 331002651], + ['Indonésie', 273523615], + ['Pakistan', 220892340] + ]); + + var options = { + title: 'Les top 5 pays par population', + chartArea: {width: '50%'}, + hAxis: { + title: 'Population Totale', + minValue: 0 + }, + vAxis: { + title: 'Pays' + } + }; + + var chart = new google.visualization.BarChart(document.getElementById('chart_div')); + + chart.draw(data, options); + } </script> + </head> + <body> + <div id="chart_div" style="width: 900px; height: 500px;"></div> + <p style="color:white;">Propulsé par Google Graph</p> + <p><a href="https://www.worldometers.info/world-population/population-by-country/" style="color:white;">Données fournies par WorldOmeter</a><p/> + </body> +</html> |