如何在 react native 中使用 chartjs？

網頁中使用報表可以選擇chartjs，他有很美的畫面，在github上的星星數有56k顆，也算是很穩定，是我接案最常用的一個報表套件。

今天是使用在react，所以首先要先有一個react專案。

---

安裝chartjs

yarn add chart.js

 

初始化

新增一隻檔案專門是初始化chartjs的，日後有統一針對所有chart的設定也可以統一寫在這裡。

import Chart from "chart.js/auto";

Chart.defaults.plugins.legend.display = false; //可以統一設定一些參數放在這裡

export default Chart;

 

使用

在頁面中放入你要顯示報表的canvas：

import React, { useRef } from "react";

const Chart = () => {
  const chartRef = useRef(null);
  return <canvas ref={chartRef} />
}     
export default Chart;

因為我們可能很多頁都會使用報表，通常你會有一個hook.js檔案，裡面去實作產生chart這件事。

import ChartJs from "plugins/Chart";

export const usePieChart = ({
  ref,
  data,
  onClick,
  onHover,
  options = {},
}) => {
  const handleClick = (e, current) => {
    onClick && onClick(e, current);
  };
  const handleHover = (e, current) => {
    onHover && onHover(e, current);
  };
  useEffect(() => {
    if (!ref) return;
    const Chart = new ChartJs(ref?.current, {
      type: "pie",
      data,
      options: {
        onClick: handleClick,
        onHover: handleHover,
        ...options,
      },
    });
    return () => {
      Chart.destroy();
    };
  }, [ref]);
  return null;
};

這邊我們必須要傳入幾個東西：

1. ref : canvas element
2. data : 要顯示的標題和值
3. onClick, onHover : 動作交互事件（可有可無）
4. options : 客製設定（可有可無），如果是每個報表都會有的設定，可以直接寫在plugins/chart.js裏

現在要在頁面中使用這個hook：

import { usePieChart } from "utils/hook";

const Chart = () => {
  const chartRef = useRef(null);
  const chartData = {}; // 詳見下方
  usePieChart({
    ref: chartRef,
    data: chartData,
    options: {
      layout: {
        padding: 50,
      },
    },
  });
  return <canvas ref={chartRef} />
}     
export default Chart;

這個chartData裡面會包含兩樣東西：labels、datasets

labels就是放所有要顯示的標題，是一個陣列(Array)：

const chartData = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
}

datasets就是放資料相關的，裡面的data是每筆資料的值，要跟上面labels的順序對應好喔！

一樣是陣列，代表你可以擁有很多的資料池；

以pie圖表來說，兩個dataset就會重疊的顯示兩個圖表。

以line圖表來說就比較好理解了，兩種折線。

另外還可以設定背景色或其他設定。

const chartData = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  datasets: [{
    data: [76, 12, 71, 30, 66],
    backgroundColor: [
      "rgb(255, 99, 132)",
      "rgb(255, 159, 64)",
      "rgb(255, 205, 86)",
      "rgb(75, 192, 192)",
      "rgb(54, 162, 235)",
    ]
  }]
}