PSheon's Lab

繪製漂亮的系統圖表

Apex Charts x React

資料視覺化是現代系統不可或缺的一環，但是繪製圖表很容易變成一件煩人的事。幸好， ApexCharts 出手了！它是一個很便利的 JavaScript 圖表工具，可以讓你在 React 應用中簡單繪製出迷人的圖表。

這篇文章將教你如何在 React 中使用 ApexCharts 繪製圖表，將數據變成一眼就懂的漂亮圖形。快來開始吧！🚀

⚡ 安裝 ApexCharts


pnpm add react-apexcharts apexcharts

安裝好之後，就可以開始實作囉！

🌈 簡單直條圖

先來做個基礎版本的直條圖：


import React from "react";
import Chart from "react-apexcharts";
 
const BarChart = () => {
  const options = {
    chart: { id: "basic-bar" },
    xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May"]
    }
  };
 
  const series = [
    {
      name: "Revenue",
      data: [30, 40, 45, 50, 49]
    }
  ];
 
  return <Chart options={options} series={series} type="bar" height={350} />;
};
 
export default BarChart;

將 BarChart 組件加到頁面中：


import React from "react";
import BarChart from "./BarChart";
 
const App = () => {
  return (
    <div>
      <h1>Monthly Revenue</h1>
      <BarChart />
    </div>
  );
};
 
export default App;

📈 漂亮的折線圖

來做個很有感覺的折線圖：


import React from "react";
import Chart from "react-apexcharts";
 
const LineChart = () => {
  const options = {
    chart: { id: "line-chart" },
    xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May"] },
    stroke: { curve: "smooth" }
  };
 
  const series = [
    {
      name: "Sales",
      data: [10, 30, 25, 50, 40]
    }
  ];
 
  return <Chart options={options} series={series} type="line" height={350} />;
};
 
export default LineChart;

追加到 App 中：


import React from "react";
import LineChart from "./LineChart";
 
const App = () => {
  return (
    <div>
      <h1>Sales Growth</h1>
      <LineChart />
    </div>
  );
};
 
export default App;

📊 K線圖 (Kandle Chart)

如果你需要展示金融數據，比如股票價格變動，那麼 K 線圖 (Kandle Chart) 會是很好的選擇：


import React from "react";
import Chart from "react-apexcharts";
 
const KandleChart = () => {
  const options = {
    chart: { type: "candlestick" },
    xaxis: { type: "datetime" },
  };
 
  const series = [
    {
      data: [
        { x: new Date(2023, 0, 1), y: [51, 58, 49, 55] },
        { x: new Date(2023, 0, 2), y: [53, 60, 52, 57] },
        { x: new Date(2023, 0, 3), y: [56, 62, 55, 60] },
        { x: new Date(2023, 0, 4), y: [58, 65, 57, 63] },
      ],
    },
  ];
 
  return <Chart options={options} series={series} type="candlestick" height={350} />;
};
 
export default KandleChart;

在 App 中加入 K 線圖：


import React from "react";
import KandleChart from "./KandleChart";
 
const App = () => {
  return (
    <div>
      <h1>Stock Market Trends</h1>
      <KandleChart />
    </div>
  );
};
 
export default App;

AAPL

$250.42 USD

December 31, 2024

7 Days change

-3.01%

30 Days change

+5.52%

90 Days change

+10.42%

🌟 結論

使用 ApexCharts 可以讓你輕鬆繪製漂亮的圖表，展示數據更有演感！

🔖 可以推薦你探索的步驟:

學習更多 ApexCharts 的功能
將圖表整合到你的實際應用
調整顏色、樣式和主題，打造自己的圖表風格

現在就來試試吧！🔥