Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon チャート作成の例コードを反応します


チャート作成の例コードを反応します


以下は、それぞれの機能と例を備えたReact Chartingライブラリの例をいくつか紹介します。

1。反応chartjs 2

- 機能:ライン、バー、パイなどのさまざまなチャートタイプ。
- 例:
- 垂直バーチャート
- 水平バーチャート
- 積み重ねられたバーチャート
- グループ化されたバーチャート
- エリアチャート
- ラインチャート
-Multiaxisラインチャート
- パイチャート
- ドーナツチャート
- 極面積チャート
- レーダーチャート
- 散布図
- バブルチャート
-MultityPeチャート
- チャートイベント
-Chart Ref
- グラデーションチャート

###2。Googleチャートの反応
- 機能:エリア、バー、バブルなどのさまざまなチャートタイプ。
- 例:
- エリアチャート
- バーチャート
- バブルチャート
- カレンダー
-Candlestickチャート
- 列チャート
- コンボチャート
- ガント
- ゲージ
- ジオチャート
- ヒストグラム
- ラインチャート
-ORGチャート
- パイチャート
- サンキー
- 散布図
- ステップエリアチャート
- テーブル
- タイムライン
- ツリーマップ
- 単語ツリー
- アニメーション
- チャートエディター
- コントロール
- 相互作用
- レイアウト
- スプレッドシート
- ツールバー

###3。APEXCHARTS.JS
- 機能:ライン、コラム、バー、パイなどのさまざまなチャートタイプ。
- 例:開発時間を節約するためのすべての例のソースコードを含めます。

###4。Canvasjs
- 機能:アニメーション、ズーム、パンニング、イベント、エクスポート、ドリルダウン、リアルタイムの更新を備えたインタラクティブなレスポンシブチャート。
- 例:
- ラインチャート
- スプラインおよびステップラインチャート
- エリアチャート
- スプラインエリア、積み上げエリア、積み重ねられたエリア100、ステップエリア、レンジエリア、および範囲のスプラインエリアチャート
- 列チャート
- バーチャート
- 積み重ねられた列、積み上げ列100%、レンジコラム、積み重ねられたバー、積み上げバー100%、レンジバー、滝チャート
- パイチャート
- ドーナツ /ドーナツチャート
- ファンネルとピラミッドチャート
-CandlestickおよびOHLCチャート
- 散布図とバブルチャート
- ボックスとウィスカーチャート
- エラーおよびエラーラインチャート
- 動的チャート
- レンジセレクター、ナビゲーター、複数のチャートを備えたストックチャート

###5。Tanstack/React-Charts
- 機能:ライン、バー、バブルなどのさまざまなチャートタイプ。
- 例:シンプル、ライン、バー、バブル、エリア、カスタムスタイル、カスタムツールチップ、軸オプション、ダークモード、スパークリング、ブラッシング、グループ化モード、ツールチップオプションなどの例が含まれています。

これらのライブラリは、Reactアプリケーションでチャートの作成を開始するのに役立つ広範な例とテンプレートを提供します。作成したいチャートの種類と、必要なカスタマイズのレベル[1] [2] [3] [4] [5]に基づいて、ニーズに最適なものを選択できます。

引用:
[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts