【React・TypeScript】円グラフサンプル

recharts

作成したサンプル

ソースコード

ライブラリ

インストールのコマンドライン

npm install recharts

描写に必要となるコード

.tsx

const App = () => {
  return (<>
      {/* ↓ 円グラフの項目、data の値次第で、要素の修正が可能 */}
      <PieChart width={width} height={height} className='margin10px'>
        <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={outerRadius} fill="#82ca9d" label={label} > {
          data.map((entry, index) =>
            (<Cell key={`cell-${index}`} fill={COLORS[index]} />)
          )
        } </Pie>
      </PieChart>
  </>);
}

/** 円グラフの各要素の色 */
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

/** 円グラフに登録するデータ */
let data = [
  {
    index: 0,
    name: 'データ1',
    value: 100,
  }, {
    index: 1,
    name: 'データ2',
    value: 200,
  }, {
    index: 2,
    name: 'データ3',
    value: 300,
  }, {
    index: 3,
    name: 'データ4',
    value: 40,
  }, {
    index: 4,
    name: 'データ5',
    value: 50,
  }
];

React Google Charts

サンプルページ

コード

ライブラリ

インストールコマンド

npm install --save react-google-charts

描写に必要となるコード

App.tsx

const App = () => {
  return (<>
      <Chart
        chartType="PieChart"
        data={chartData}
        options={CHART_OPTIONS}
        width={"100%"}
        height={"600px"}
        chartEvents={chartEvents}
      />
  </>);
}

/** 円グラフに描写するデータ */
let chartData = [
  ["Data", "value"],
  ["データ１", 11],
  ["データ２", 2],
  ["データ３", 2],
  ["データ４", 2],
  ["データ５", 7],
];

/** 円グラフのオプション */
export const CHART_OPTIONS = {
  legend: "none",
  pieSliceText: "label", // 円グラフの各項目の表示形式
  title: "タイトル",
  pieStartAngle: 100,
}