React バブル チャート

    Ignite UI for React バブル チャートは散布図の一種で、可変スケーリングのマーカーを表示して、いくつかの異なる一連のデータ内の項目間の関係を表したり、x 座標と y 座標を使用してデータ項目をプロットしたりします。データ ポイントのこれらの座標は、2 つの数値データ列によって決定されます。バブル チャートは、データの不均一な間隔またはクラスターに注意を向けます。このチャートは、科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。バブル チャートには、散布図チャートの多くの特性がありますが、さまざまな半径スケール サイズを持つオプションがあります。

    React バブル チャートの例

    次の例に示すように、IgrBubbleSeries と 2 つの数値軸を使用して、IgrDataChart コントロールで Ignite UI for React バブル チャートを作成できます。

    EXAMPLE
    DATA
    TSX
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    単一シリーズの React バブル チャート

    以下の例に示すように、データを IgrBubbleSeriesItemsSource プロパティにバインドし、その xMemberPathyMemberPathradiusMemberPath プロパティを使用してデータ列をマップできます。

    EXAMPLE
    DATA
    TSX
    CSS

    Ignite UI for React | CTA Banner

    複数シリーズの React バブル チャート

    React バブル チャートでは、次の例に示すように、複数のデータ ソースのバインドは、新しい各データ ソースを追加の IgrBubbleSeriesItemsSource プロパティに設定することで機能します。

    EXAMPLE
    DATA
    TSX
    CSS

    React バブル チャートのスタイル設定

    React バブル チャートでは、markerType プロパティを使用してバブル マーカーの形状をカスタマイズし、radiusScale プロパティを使用してサイズをカスタマイズし、markerBrushmarkerOutlinemarkerThickness プロパティを使用して外観をカスタマイズできます。さらに、fillMemberPath プロパティと fillScale プロパティを使用して、データ列に基づいてバブル マーカーにカラーを付けることもできます。この例では、上記のプロパティの使用法を示しています。

    EXAMPLE
    DATA
    TSX
    CSS

    その他のリソース

    API リファレンス

    以下は、上記のセクションで説明した API メンバーのリストです。