Chart.js 是一個輕量級的 JavaScript 圖表庫，用於在網站上輕鬆創建各種互動式圖表。它基於 HTML5 的 <canvas> 元素，並提供了簡單直觀的 API 來生成各種常見的圖表類型，包括條形圖、折線圖、圓餅圖等。Chart.js 支援動畫效果、響應式設計，並且可以與其他前端框架（如 React、Vue、Angular 等）輕鬆整合。

[官方網站](https://www.chartjs.org/)

Chart.js 支援多種圖表類型，包括：
條形圖（Bar Chart）
折線圖（Line Chart）
圓餅圖（Pie Chart）
雷達圖（Radar Chart）
散點圖（Scatter Chart）
氣泡圖（Bubble Chart）
極區圖（Polar Area Chart）

例如下面的程式碼，就是一個圓餅圖的範例，跟其他相關的設定：

const PieChart = () => {
  const chartRef = useRef(null);  // 用來引用 canvas 元素

  useEffect(() => {
    // 確保圖表只初始化一次
    const ctx = chartRef.current.getContext('2d');

    new Chart(ctx, {
      type: 'pie',  // 圓餅圖
      data: {
        labels: ['Red', 'Blue', 'Yellow'],  // 標籤
        datasets: [{
          label: 'My Pie Chart',  // 圖表標題
          data: [12, 19, 9],  // 各區塊的數據
          backgroundColor: [  // 設定每個區塊的顏色
            'rgba(255, 99, 132, 0.2)',  // 紅色
            'rgba(54, 162, 235, 0.2)',  // 藍色
            'rgba(255, 206, 86, 0.2)'   // 黃色
          ],
          borderColor: [  // 設定邊框顏色
            'rgba(255, 99, 132, 1)',  // 紅色邊框
            'rgba(54, 162, 235, 1)',  // 藍色邊框
            'rgba(255, 206, 86, 1)'   // 黃色邊框
          ],
          borderWidth: 1  // 邊框寬度
        }]
      },
      options: {
        responsive: true,  // 使圖表響應式
        plugins: {
          legend: {
            position: 'top',  // 圖例顯示位置
          },
          tooltip: {
            enabled: true,  // 啟用工具提示
          }
        }
      }
    });
  }, []);

  return (
    <div>
      <canvas ref={chartRef} width="400" height="400"></canvas>
    </div>
  );
}

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/vYoMaYj?editors=1011)，利用 chart.js 的方式生成一個條形圖（Bar Chart），資料可以自行隨意建立，只要有正確的呈現圖表就行。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

const ChartComponent = () => {
  const chartRef = React.useRef(null);
  const [chartInstance, setChartInstance] = useState(null);

  useEffect(() => {
    if (chartRef.current && !chartInstance) {
      const newChartInstance = new Chart(chartRef.current, {
        type: 'bar',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June'],
          datasets: [
            {
              label: 'Sales',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: 'rgba(75, 192, 192, 0.2)',
              borderColor: 'rgba(75, 192, 192, 1)',
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
      setChartInstance(newChartInstance);
    }

    return () => {
      if (chartInstance) {
        chartInstance.destroy();
      }
    };
  }, [chartInstance]);

  return <canvas ref={chartRef} width="400" height="200" />;
};

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/QwWWdYb) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/jEOOazN?editors=1011) |
| 3 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/JojoRmm) |
| 4 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/emYmBNK?editors=1011) |
| 5 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/vEYEyGE?editors=1011) |
| 6 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/GgRgrKv?editors=1010) |
| 7 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RNwNowN) |
|8|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/yyLygVW?editors=0011)|
|9|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/MYWYmVq?editors=1011)|
|9| Kaya |[CodePen](https://codepen.io/kayaribi/pen/pvovrKe)|
| 11 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/RNwNvOo?editors=0010)|
| 12 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/pvovMvv) |
| 13 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/PwoqopE) |
| 14 | Clove | [Codepen](https://codesandbox.io/p/sandbox/dmd4wg) |
| 15 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/pvoJGad) |
| 16 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/LEYVvee?editors=1011) |
| 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/EaxVZmB?editors=0011) |
| 18 | Toung | [Codepen](https://codepen.io/Toung/pen/raNwwJg) |
| 19 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/RNwYXNp?editors=1011) |
| 20 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/EajaJmK?editors=0011) |
| 21 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/Pwqgpwe?editors=1011) |
| 22 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/RNrKZGV) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |