【React】Ant Design Chartsでグラフを作ってみる
はじめに
個人開発で使用しているAnt Design Chartsというチャートの描画を行えるライブラリがあるのですが、日本語の情報があまりにも少なすぎるのでちょっと自分で書いてみようと思いました。
Ant Design Charts
Ant Design Chartsとは、中国のAlibabaが開発したチャートを描画できるライブラリのひとつです。
Reactをベースにしたライブラリのため、Reactでしか使用できないのが特徴です。
Ant Design Chartsは聞き馴染みが無いかもしれませんが、UIフレームワークであるAnt Designの方は聞いたことがある方も多いのではないでしょうか？
こっちもAlibabaが開発したものですが、かなり有名ですね。
Ant Design Chartsはその流れをくむライブラリだと思っていただければいいと思います。
npm trends
npm trendsでReactの他の主要なチャート描画ライブラリと比べてみると、あまり人気はありません。
競合の他ライブラリが7、8年前にリリースされていることを考えると、3年前にリリースされたAnt Design Chartsが負けるのは仕方ない部分もあります。
その為、開発のための情報もあまりネットに落ちていないので、そこは嬉しくないところです。
公式ドキュメント
公式ドキュメントはかなり充実しているので、普通に使う分にはそれほど問題なく使用できます。
API:
サンプル:
ただ、Ant Design Chartsの公式ドキュメントには中国語と英語の二つの言語が利用できますが、英語の翻訳カバー率が100%でないのがちょっと面倒です。
また、Ant Design Chartsのコード内のコメントが全て中国語で書かれているのも、ちょっと面倒でしょうか。
（筆者のような外国語弱者は例え英語であっても機械翻訳に力に頼らざるを得ないので、大した違いはありませんが……。でも英語→日本語に比べて中国語→日本語だと翻訳精度がそこそこ落ちます）
Github
Githubを確認すると、活動は活発に行われているみたいです(2023/7/28時点）。
コミットもある程度積極的に行われており、ドキュメントを見ても割と頻繁に新機能が追加されてます。
TypeScript
また、Githubを見ていただければ分かりますが、Ant Design ChartsはTypeScriptで開発されているので、TypeScriptの対応はバッチリです。
コーディングしていく
では早速、簡単なグラフを作っていきましょう！
とはいっても、Ant Design Chartsは公式ドキュメントや公式が用意したCodeSandboxにそのまま使える多くのコードが用意されているので、そこまで難しくありません。
npmインストール
まずはインストールを行います。
npm:
npm install @ant-design/charts --save
yarn:
yarn add @ant-design/charts
基本は@ant-design/chartsだけインストールすれば大丈夫です。
しかしAnt Design Chartsの一部の機能しか使う予定が無い場合は、機能が制限されたサブライブラリをインストールすることができます。
例えば、グラフの描画しか行わないのであれば、@ant-design/plotsをインストールすればOKです。
その辺りは公式のクイックスタートに記載があります。
データを用意する
グラフに描画する為のデータを用意します。
今回は線グラフを描画したいので、公式ドキュメントの線グラフのサンプルをそのまま取ってきます。
[
{
"Date": "2010-01",
"scales": 1998
},
{
"Date": "2010-02",
"scales": 1850
},
{
"Date": "2010-03",
"scales": 1720
},
{
"Date": "2010-04",
"scales": 1818
},
{
"Date": "2010-05",
"scales": 1920
},
{
"Date": "2010-06",
"scales": 1802
},
{
"Date": "2010-07",
"scales": 1945
},
{
"Date": "2010-08",
"scales": 1856
},
{
"Date": "2010-09",
"scales": 2107
},
{
"Date": "2010-10",
"scales": 2140
},
{
"Date": "2010-11",
"scales": 2311
},
{
"Date": "2010-12",
"scales": 1972
},
{
"Date": "2011-01",
"scales": 1760
},
{
"Date": "2011-02",
"scales": 1824
},
{
"Date": "2011-03",
"scales": 1801
},
{
"Date": "2011-04",
"scales": 2001
},
{
"Date": "2011-05",
"scales": 1640
},
{
"Date": "2011-06",
"scales": 1502
},
{
"Date": "2011-07",
"scales": 1621
},
{
"Date": "2011-08",
"scales": 1480
},
{
"Date": "2011-09",
"scales": 1549
},
{
"Date": "2011-10",
"scales": 1390
},
{
"Date": "2011-11",
"scales": 1325
},
{
"Date": "2011-12",
"scales": 1250
},
{
"Date": "2012-01",
"scales": 1394
},
{
"Date": "2012-02",
"scales": 1406
},
{
"Date": "2012-03",
"scales": 1578
},
{
"Date": "2012-04",
"scales": 1465
},
{
"Date": "2012-05",
"scales": 1689
},
{
"Date": "2012-06",
"scales": 1755
},
{
"Date": "2012-07",
"scales": 1495
},
{
"Date": "2012-08",
"scales": 1508
},
{
"Date": "2012-09",
"scales": 1433
},
{
"Date": "2012-10",
"scales": 1344
},
{
"Date": "2012-11",
"scales": 1201
},
{
"Date": "2012-12",
"scales": 1065
},
{
"Date": "2013-01",
"scales": 1255
},
{
"Date": "2013-02",
"scales": 1429
},
{
"Date": "2013-03",
"scales": 1398
},
{
"Date": "2013-04",
"scales": 1678
},
{
"Date": "2013-05",
"scales": 1524
},
{
"Date": "2013-06",
"scales": 1688
},
{
"Date": "2013-07",
"scales": 1500
},
{
"Date": "2013-08",
"scales": 1670
},
{
"Date": "2013-09",
"scales": 1734
},
{
"Date": "2013-10",
"scales": 1699
},
{
"Date": "2013-11",
"scales": 1508
},
{
"Date": "2013-12",
"scales": 1680
},
{
"Date": "2014-01",
"scales": 1750
},
{
"Date": "2014-02",
"scales": 1602
},
{
"Date": "2014-03",
"scales": 1834
},
{
"Date": "2014-04",
"scales": 1722
},
{
"Date": "2014-05",
"scales": 1430
},
{
"Date": "2014-06",
"scales": 1280
},
{
"Date": "2014-07",
"scales": 1367
},
{
"Date": "2014-08",
"scales": 1155
},
{
"Date": "2014-09",
"scales": 1289
},
{
"Date": "2014-10",
"scales": 1104
},
{
"Date": "2014-11",
"scales": 1246
},
{
"Date": "2014-12",
"scales": 1098
},
{
"Date": "2015-01",
"scales": 1189
},
{
"Date": "2015-02",
"scales": 1276
},
{
"Date": "2015-03",
"scales": 1033
},
{
"Date": "2015-04",
"scales": 956
},
{
"Date": "2015-05",
"scales": 845
},
{
"Date": "2015-06",
"scales": 1089
},
{
"Date": "2015-07",
"scales": 944
},
{
"Date": "2015-08",
"scales": 1043
},
{
"Date": "2015-09",
"scales": 893
},
{
"Date": "2015-10",
"scales": 840
},
{
"Date": "2015-11",
"scales": 934
},
{
"Date": "2015-12",
"scales": 810
},
{
"Date": "2016-01",
"scales": 782
},
{
"Date": "2016-02",
"scales": 1089
},
{
"Date": "2016-03",
"scales": 745
},
{
"Date": "2016-04",
"scales": 680
},
{
"Date": "2016-05",
"scales": 802
},
{
"Date": "2016-06",
"scales": 697
},
{
"Date": "2016-07",
"scales": 583
},
{
"Date": "2016-08",
"scales": 456
},
{
"Date": "2016-09",
"scales": 524
},
{
"Date": "2016-10",
"scales": 398
},
{
"Date": "2016-11",
"scales": 278
},
{
"Date": "2016-12",
"scales": 195
},
{
"Date": "2017-01",
"scales": 145
},
{
"Date": "2017-02",
"scales": 207
}
]
線グラフのコンポーネントをインポートし、使用する
線グラフを描画できる<Line>コンポーネントをインポートして使います。
このコードも公式ドキュメントの線グラフのサンプルからの流用です。
import { Line, LineConfig } from "@ant-design/plots";
import { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState([]);
const config: LineConfig = {
data: data,
padding: "auto",
xField: "Date",
yField: "scales",
xAxis: {
// type: 'timeCat',
tickCount: 5
}
};
return (
<div className="App">
<Line {...config} />
</div>
);
}
あとは、用意したデータをコードのuseStateの初期値に入れればOKです。
実際のコードは下のCodeSandboxを確認してください。
さいごに
Ant Design Chartsいかがだったでしょうか？
それほど難しいものではなかったと思います。
しかし、カスタマイズしていこうとすると、情報の少なさゆえに時間がかかることも多いので、また機会があればカスタマイズにも触れた記事を書こうと思います。
ありがとうございました。
Discussion