JSFiddle - React, Tailwind, and code Playground
by CCCCY
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>JavaScript
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['年份', '交通事故總件數'],
['2018', 320315],
['2019', 341972],
['2020', 362393],
['2021', 358221],
['2022', 375844]
]);
var options = {
chart: {
title: '2018～2022年交通事故總件數',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function(e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}