google chart test

Simple Table

Sortable Table with Linked Chart

Google Charts 教學

Google Charts 是一個強大的 JavaScript 圖表工具，讓你可以輕鬆在網頁上呈現各種圖表。以下是 Google Charts 的基本使用步驟：

1. 引入 Google Charts API

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2. 載入圖表庫

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
        

3. 建立圖表函式 (範例：折線圖)

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['年份', '銷售量'],
    ['2019', 1000],
    ['2020', 1170],
    ['2021', 660],
    ['2022', 1030]
  ]);

  var options = {
    title: '年度銷售趨勢',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
}
        

4. 在 HTML 中放置圖表容器

<div id="curve_chart" style="width: 100%; height: 500px;"></div>

範例圖表：折線圖