# 🏅Day39 - React 套件應用 (5) - Chart.js

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），資料可以自行隨意建立，只要有正確的呈現圖表就行。

<!-- 解答：

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" />;
};

-->
| Name | Codepen |
| -------- | -------- |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/ByzxebP?editors=0010)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/Eaypgyb)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/OPXwbRW)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/JoKBbeo?editors=1011)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/YPWjpLW)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/dPXjWox?editors=0011)|
| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/ZYOjKvm?editors=1011)|
| chippy |[Codepen](https://hackmd.io/7QVd-5n5QzCMj_iw3gma5w)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/QwEBgZe) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/XJKBMLYj) |
| 小懿 | [codepen](https://codepen.io/YT-the-vuer/pen/qENyVeV) |
| 平平 | [codepen](https://codepen.io/ypinpin/pen/myEjqbw) |
| cks40660 | [codepen](https://codepen.io/CKS40660/pen/ogLMpyQ)|
| kashiwatei | [codepen](https://codepen.io/kashiwatei/pen/azZjYGB?editors=1011)|
| Percy | [codepen](https://codepen.io/Percy-Ku/pen/MYeBGpb?editors=0010)|
| 老屠 | [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/VYjBPRX?editors=0011)|
| Eileen | [codepen](https://codepen.io/Eileen-io/pen/MYeBLyQ)|
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/EayeyqN?editors=0011)|
| Jenna | [codepen](https://codepen.io/abiscc14/pen/xbOagjO)|
| Leonard | [codepen](https://codepen.io/hyyfjqra-the-sans/pen/LEZJWRe?editors=0011)|
| 星雪糖 | [codepen](https://codepen.io/vfpofbgm-the-scripter/pen/raLZraR?editors=1011)|
| 7Red | [Codepen](https://codepen.io/cch2655/pen/gbMdEaW) |