Chart.js可以顯示圖表，很方便，如果能連接資料庫就更強大了，這個文章來說明如何將GAS用成資料庫，透過Chart.js來顯示長條圖、線圖以及圓餅圖。

Chart.js官網：https://www.chartjs.org/

範例：

Google Sheets 資料範例：

Code.js code

// 連結index
function doGet() {
  var file = HtmlService.createTemplateFromFile('index');
  var evaluate = file.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
  var html = evaluate.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return html;
}

// 抓資料 Google Sheets
function getDataFromSheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('ChartData');
  var lastColumn = sheet.getLastColumn();
  var headersRange = sheet.getRange(1, 1, 1, lastColumn); 
  var dataRange = sheet.getRange(2, 1, 1, lastColumn); 

  var headers = headersRange.getValues()[0];
  var data = dataRange.getValues()[0];

  var chartData = {
    labels: headers,
    values: data,

  };

  return chartData;
}




// 將資料傳給前端
function getChartData() {
  var data = getDataFromSheet();
  return JSON.stringify(data);
}

index.html

<!DOCTYPE html>
<html>
<head>
  //連結chart.js
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div style="display: flex; justify-content: space-around;">
    <div>
      <h2>Bar Chart</h2>
      <canvas id="barChart" width="400" height="400"></canvas>
    </div>
    <div>
      <h2>Line Chart</h2>
      <canvas id="lineChart" width="400" height="400"></canvas>
    </div>
    <div>
      <h2>Pie Chart</h2>
      <canvas id="pieChart" width="400" height="400"></canvas>
    </div>
  </div>


//JS code
  <script>
    google.script.run.withSuccessHandler(drawCharts).getChartData();

    function drawCharts(data) {
      var ctxBar = document.getElementById('barChart').getContext('2d');
      var ctxLine = document.getElementById('lineChart').getContext('2d');
      var ctxPie = document.getElementById('pieChart').getContext('2d');
      
      var chartData = JSON.parse(data);

      chartData.barColors = generateColors(chartData.labels.length);
      chartData.lineColors = generateColors(chartData.labels.length);
      chartData.pieColors = generateColors(chartData.labels.length);

      drawBarChart(ctxBar, chartData);
      drawLineChart(ctxLine, chartData);
      drawPieChart(ctxPie, chartData);
    }
//長條圖
    function drawBarChart(ctx, chartData) {
      var barChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: chartData.labels,
          datasets: [{
            label: 'Data from Google Sheets',
            data: chartData.values,
            backgroundColor: chartData.barColors,
            borderColor: chartData.barColors,
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
//線圖
    function drawLineChart(ctx, chartData) {
      var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: chartData.labels,
          datasets: [{
            label: 'Data from Google Sheets',
            data: chartData.values,
            fill: false,
            borderColor: chartData.lineColors,
            tension: 0.1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
//圓餅圖
    function drawPieChart(ctx, chartData) {
      var pieChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: chartData.labels,
          datasets: [{
            label: 'Data from Google Sheets',
            data: chartData.values,
            backgroundColor: chartData.pieColors,
            borderColor: chartData.pieColors,
            borderWidth: 1
          }]
        },
        options: {}
      });
    }
//動態顏色
    function generateColors(numColors) {
      var colors = [];
      var step = 360 / numColors;
      for (var i = 0; i < numColors; i++) {
        var hue = (step * i) % 360;
        var saturation = Math.floor(Math.random() * 50) + 50; // Adjust saturation for contrast
        var lightness = Math.floor(Math.random() * 50) + 50; // Adjust lightness for contrast
        var color = `hsla(${hue}, ${saturation}%, ${lightness}%, 0.7)`;
        colors.push(color);
      }
      return colors;
    }
  </script>
</body>
</html>

發表迴響