自動生成 PPT 多樣的圖表樣板

自動生成 PPT 多樣的圖表樣板

1. 檢查資料解析部分（CSV 輸入）

• 問題點：使用者輸入 CSV 資料後，可能因資料格式不符或解析錯誤，導致無法正確生成圖表。
• 改善建議：在 script.js 中加入 CSV 資料的驗證機制，並提供錯誤訊息提示使用者修正資料格式。
• 範例：

  function parseCSV(data) {
      try {
          // 使用 split 與正規表達式處理 CSV 資料，並驗證每一列資料格式
          let rows = data.trim().split("\n");
          return rows.map(row => row.split(","));
      } catch (error) {
          alert("CSV 資料格式錯誤，請檢查後重新輸入");
          return null;
      }
  }
  

2. 增加圖表庫支援

• 問題點：預覽圖表未生成可能與圖表庫初始化或資料綁定錯誤有關。
• 改善建議：建議使用如 Chart.js 等成熟圖表庫來生成各種圖表，確保在載入 index.html 時正確引入圖表庫的 CDN 檔案，並在 script.js 中進行初始化。
• 範例：

  <!-- 在 index.html 中加入 Chart.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  

  // 初始化圖表函式範例
  function createChart(chartType, data, theme) {
      const ctx = document.getElementById("chartPreview").getContext("2d");
      return new Chart(ctx, {
          type: chartType,
          data: data,
          options: {
              // 根據主題設定顏色、字型等
              responsive: true,
              plugins: {
                  legend: {
                      labels: {
                          color: theme === "商務藍" ? "blue" : "black"
                      }
                  }
              }
          }
      });
  }
  

3. 改進 UI 與預覽功能

• 問題點：使用者反映「預覽後沒有生成」，可能是因為 DOM 元素未正確更新或事件監聽器沒有綁定到按鈕上。
• 改善建議：
  • 確保在 index.html 中提供一個專門用於預覽圖表的 <canvas> 元素。
  • 檢查並確保按鈕事件觸發後，能夠正確抓取使用者輸入的資料、圖表類型與顏色主題，並呼叫 createChart 函式。
• 範例：

  <!-- index.html 中預覽區域 -->
  <canvas id="chartPreview" width="400" height="300"></canvas>
  <button id="generateChart">生成圖表</button>
  

  // script.js 中綁定按鈕事件
  document.getElementById("generateChart").addEventListener("click", function() {
      const csvData = document.getElementById("csvInput").value;
      const parsedData = parseCSV(csvData);
      if (parsedData) {
          // 假設建立圖表資料物件與指定預設主題
          const data = {
              labels: parsedData[0].slice(1),
              datasets: parsedData.slice(1).map(row => ({
                  label: row[0],
                  data: row.slice(1).map(Number)
              }))
          };
          const theme = document.getElementById("themeSelect").value;
          // 依使用者選擇的圖表類型建立圖表
          const chartType = document.getElementById("chartTypeSelect").value;
          createChart(chartType, data, theme);
      }
  });
  

4. 提供多種圖表與顏色主題選擇

• 問題點：使用者需能選擇不同圖表類型與主題。
• 改善建議：
  • 在 index.html 中提供下拉選單選擇圖表類型（長條圖、折線圖、圓餅圖等）。
  • 在 style.css 中為各主題定義預設樣式，並在 JavaScript 中依據選擇的主題調整圖表配置。
• 範例：

  <!-- index.html 中圖表類型與主題選擇 -->
  <select id="chartTypeSelect">
      <option value="bar">長條圖</option>
      <option value="line">折線圖</option>
      <option value="pie">圓餅圖</option>
      <!-- 可依需求增加其他選項 -->
  </select>
  <select id="themeSelect">
      <option value="商務藍">商務藍</option>
      <option value="活力綠">活力綠</option>
      <option value="現代紫">現代紫</option>
      <option value="暖色調">暖色調</option>
      <option value="冷色調">冷色調</option>
  </select>
  

5. 增加匯出功能

• 問題點：使用者需要將生成的圖表匯出為 PNG 格式。
• 改善建議：利用 HTMLCanvasElement 的 toDataURL() 方法來匯出圖片。
• 範例：

  function exportChart() {
      const canvas = document.getElementById("chartPreview");
      const imageURL = canvas.toDataURL("image/png");
      // 建立下載連結並觸發點擊事件
      const link = document.createElement("a");
      link.href = imageURL;
      link.download = "chart.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
  }
  
  // 可在 HTML 中增加匯出按鈕
  document.getElementById("exportChart").addEventListener("click", exportChart);
  

  <!-- index.html 增加匯出按鈕 -->
  <button id="exportChart">匯出圖表 (PNG)</button>
  

---

綜合以上改善建議，您可以調整 index.html、style.css 與 script.js，確保每個模組協同運作。這樣用戶在輸入資料、選擇圖表類型與主題後，能夠即時預覽並匯出專業級圖表，用於 PPT 簡報中。您可以根據這些範例與思路進行進一步開發，並根據用戶反饋持續調整介面與功能。

有任何進一步的問題或需要更詳細的程式碼範例，歡迎提出進一步討論。