Help us understand the problem. What is going on with this article?

React向けチャートライブラリRechartsで円グラフ

React向けチャートライブラリRechartsで円グラフ

📊グラフの種類

AreaChart:面グラフ。折れ線グラフに基づき、定量データを表示したグラフ。
BarChart:棒グラフ。四角い棒の長さで何らかの値を表現するグラフ。
LineChart:折れ線グラフ。散布図の一種であり、プロットされた点を直線でつないだグラフ。
ComposedChart:折れ線グラフ、面グラフ、棒グラフで構成されるグラフ。線のような単一のタイプのチャートを描画する場合は、LineChartを使う。
PieChart:円グラフ。丸い図形を扇形に分割し、何らかの構成比率を表したグラフ。
RadarChart:レーダーチャート。複数の項目の大きさを一見して比較することのできるグラフ。
RadialBarChart:円弧で表現する棒グラフ。
ScatterChart:散布図(分布図)。縦軸、横軸に2項目の量や大きさ等を対応させ、データを点でプロットしたグラフ。
FunnelChart:ファンネルチャート。販売プロセスの段階を表し、各段階の潜在的な収益額を示すためによく使用されるグラフ。
Treemap:ツリーマップ。ネストされた長方形のセットとして階層状のツリー構造のデータを表示したもの。

円グラフに関連するコンポーネント

<PieChart />コンポーネント

円グラフの大元となるコンポーネント。全体のサイズ等を定義します。

☘️プロパティ

  • width : チャートコンテナーの幅。
  • height : チャートコンテナーの高さ。
  • margin : コンテナの周りの空白のサイズ。例){ top: 5, right: 5, bottom: 5, left: 5 }

🔥イベント

  • onClick
  • onMouseEnter
  • onMouseLeave

👦子コンポーネント

  • <PolarAngleAxis />:
  • <PolarRadiusAxis />:
  • <PolarGrid />:
  • <Legend />:
  • <Tooltip />:
  • <Pie />:
  • <Customized />:

<Pie />コンポーネント

グラフのセクター全体についてを定義します。

プロパティ

  • cx : 中心のx座標。パーセンテージを設定した場合、最終値はコンテナ幅のパーセンテージを乗算することにより取得されます。
  • cy : 中心のy座標。パーセンテージを設定すると、コンテナの高さのパーセンテージを乗算することで最終的な値が取得されます。
  • innerRadius : すべてのセクターの内半径。パーセンテージを設定した場合、最終値は、幅、高さ、cx、cyで計算されるmaxRadiusのパーセンテージを乗算することにより取得されます。
  • outerRadius : すべてのセクターの外半径。パーセンテージを設定した場合、最終値は、幅、高さ、cx、cyで計算されるmaxRadiusのパーセンテージを乗算することにより取得されます。
  • startAngle : 最初のセクターの開始角度。円の頂点から反時計回りで始めたい場合は、{startAngle:90, endAngle:450}、同じく円の頂点から時計回りで始めたい場合は、{startAngle:450, endAngle:90}を指定する。
  • endAngle : 最後のセクターの終了角度。
  • minAngle : 各非ゼロデータの最小角度。
  • paddingAngle : 2つのセクター間の角度。
  • nameKey : 各セクターの名前のキー。
  • dataKey : 各セクターの値のキー。
  • legendType : 凡例のアイコンのタイプ。'none'に設定すると、凡例項目はレンダリングされません。'line' 'square' 'rect 'circle' 'cross' 'diamond' 'square' 'star' 'triangle' 'wye' 'none'
  • label : trueの時、値がラベルとして表示されます。デフォルトはfalse
  • labelLine : trueの場合、セクターとラベルを結ぶ線を描画。
  • data : 各要素がオブジェクトであるソースデータ。
  • activeIndex : Pieのアクティブセクターのインデックス。このオプションは、マウスイベントハンドラーで変更できます。
  • activeSphape : アクティブなセクターの形状。
  • isAnimationActive : trueに設定すると、パイのアニメーションが有効化。
  • animationBegin : アニメーションをいつ開始するかを指定します。このオプションの単位はmsです。
  • animetionDuration : アニメーションの継続時間を指定します。このオプションの単位はmsです。
  • animationEasing : イージング関数のタイプ。'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear' Function

イベント

  • onAnimationStart
  • onAnimationEnd
  • onClick
  • onMouseDown
  • onMouseUp
  • onMouseMove
  • onMouseOver
  • onMouseOut
  • onMouseEnter
  • onMouseLeave

子コンポーネント
- <Cell />
- <LabelList />

<Cell />コンポーネント

各セクターの色や枠を定義します。

プロパティ
- fill : セクターの塗りつぶし色を指定。
- stroke : セクターの枠線の色を指定。
- strokeWidth : セクターの枠線の太さを数値で指定。

<LabelList />コンポーネント

各セクターに対応するラベルを定義します。

<Legend />コンポーネント

グラフの凡例を定義します。

プロパティ

  • width : 凡例の幅。
  • height : 凡例の高さ。
  • verticalAlign : 凡例の位置。
  • formatter : 凡例の項目表示をカスタマイズ。

<ToolTip />コンポーネント

セクターにマウスオーバーしたときのツールチップを定義。
プロパティ
- content : ツールチップをカスタマイズ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした