JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8" />
  <title>V5 - Chart</title>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    #chart_div { width: 800px; height: 400px; }
  </style>
</head>
<body>
  <h2>Version 5 — 圖表（商品總數量 / 商品名稱）</h2>

  <div>
    <label>查詢（例如 group by 商品名稱）：</label>
    <input id="q" style="width:60%" value="select C, sum(D) group by C"/>
    <button id="run">畫圖</button>
  </div>

  <div id="chart_div">讀取中...</div>

  <script>
    // 請替換成你的試算表 ID 與工作表名稱
	var SHEET_ID = "1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk";
    var SHEET_NAME = "工作表1"; // 或你自己的工作表名稱
    var baseUrl = 'https://docs.google.com/spreadsheets/d/' + SHEET_ID + '/gviz/tq?sheet=' + encodeURIComponent(SHEET_NAME);

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

    function init() {
      document.getElementById('run').addEventListener('click', drawChart);
      drawChart(); // 初次自動畫一次
    }

    function drawChart() {
      var q = document.getElementById('q').value;
      var query = new google.visualization.Query(baseUrl);
      query.setQuery(q);
      query.send(function(response) {
        if (response.isError()) {
          document.getElementById('chart_div').innerText = "Query 錯誤：" + response.getMessage();
          return;
        }
        var data = response.getDataTable();

        // 如果第一行是 header OK，直接畫圖
        var options = {
          title: '各商品總數量（sum of 數量）',
          legend: { position: 'none' },
          hAxis: { title: data.getColumnLabel(0) },
          vAxis: { title: '總數量' }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      });
    }
  </script>
</body>
</html>