React 折れ線チャート

Ignite UI for React 折れ線チャート (または折れ線グラフ) は、カテゴリチャートの一種で、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントで表される連続データ値を示します。トレンドの表示や比較分析によく使用されます。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。

React 折れ線チャートの例

次の例に示すように、データを ItemsSource プロパティにバインドし、chartType プロパティを Line 列挙型に設定することで、IgrCategoryChartコントロールに React 折れ線チャートを作成できます。

折れ線チャートの推奨事項

React 折れ線チャートはプロジェクトに適していますか?

エリアチャートとは異なり、折れ線チャートは X 軸 (下軸) と線の間の領域を塗りつぶしません。
React 折れ線チャートは、データポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、React スプラインチャートと同じです。

折れ線チャートには、データに基づいて複数のバリアントがあります。以下が含まれます。

階層型折れ線チャート
積層型折れ線チャート
ステップ折れ線チャート
極座標型折れ線チャート
積層型 100 折れ線チャート

折れ線チャートのユースケース

折れ線チャートを選択するための一般的なユースケースはいくつかあります:

パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合
経時的なトレンドを比較する必要がある場合
2 つ以上のデータシリーズの違いを表示したい場合
個別のカテゴリの部分対全体の累積比較を表示したい場合
比較解析のために 1 つ以上のカテゴリのデータトレンドを表示する必要がある場合
詳細な時系列データを可視化する必要がある場合

折れ線チャートのベストプラクティス:

データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する
時系列データを左から右へ並べ替える
実線などの視覚属性を使用して一連のデータを表示する

以下の場合に折れ線チャートを使用しないでください。

多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合
時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。

折れ線チャートのデータ構造:

データソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。
データソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。
データソースに少なくとも 1 つのデータ項目を含む必要があります
すべてのデータ項目には、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
すべてのデータ項目には少なくとも 1 つの数値データ列が含まれている必要があります。

単一シリーズの React 折れ線チャート

以下の例に示すように、React 折れ線チャートは、2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。

IgrCategoryChart コントロールでこのチャートタイプを作成するには、以下の例のように、データをバインドし、chartType プロパティを Line に設定します:

複数シリーズの React 折れ線チャート

React 折れ線チャートを使用すると、複数のシリーズを組み合わせて時間の経過に伴う変化を比較または確認できます。中国と米国のデータを含むデータソースにバインドするだけで、折れ線チャートは追加データに合わせて自動的に更新されます。

ライブデータの React 折れ線チャート

React 折れ線チャートは、次のデモに示すように、数百万に及ぶデータポイントを含む大量データを処理し、それらを数ミリ秒ごとに更新できます。

この例では、選択した間隔でライブデータを React 折れ線チャートにストリーミングしています。データポイントを 5,000 から 100 万に設定し、チャートを更新してチャートを描画するデバイスに基づいてスケールを最適化できます。

React 折れ線チャートのスタイル設定

チャートを設定したら、線の色の変更、凡例のフォントファミリの変更、軸ラベルのサイズの増加など読みやすくするためにスタイル設定をカスタマイズできます。

IgrDataChart を使用し、系列に dashArray プロパティを設定することで、IgrLineSeries 内に破線を作成することもできます。このプロパティは、線の結果として得られるダッシュの長さを表す数値の配列を受け取ります。

次の例は、IgrDataChart の IgrLineSeries での dashArray の使用法を示しています。

高度なタイプの折れ線チャート

次のセクションでは、簡略化された API を使用した IgrCategoryChart コントロールの代わりに IgrDataChart コントロールを使用して作成できる、より高度なタイプの React 折れ線チャートについて説明します。

React 積層型折れ線チャート

積層型折れ線チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStackedLineSeries にバインドします:

React 積層型 100% 折れ線チャート

積層型 100% 折れ線チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型折れ線チャートと同じです。データを直接表現するのでなく、積層型 100% 折れ線チャートは、データポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンラインショッピングトラフィックについて行われた調査を示しています。

IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStacked100LineSeries にバインドします:

React ラジアル折れ線チャート

ラジアル折れ線チャートはラジアルチャートのグループに属し、データポイントを接続する直線のコレクションによってバインドされた塗りつぶしなしのポリゴンの形状を持っています。このグラフチャートは、折れ線チャートと同じデータプロットの概念を使用しますが、データポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。

IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrRadialLineSeries にバインドします:

React 極座標型折れ線チャート

極座標折れ線チャートは極座標チャートのグループに属し、極座標 (角度/半径) のデータポイントを結ぶ直線のコレクションを使用して描画されます。極座標チャートは、散布折れ線チャートと同じデータプロットの概念を使用しますが、視覚化によってデータポイントがを水平方向に引き伸ばされるのではなく、円の周りにラップされる点が異なります。

IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrPolarLineSeries にバインドします:

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

API リファレンス

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

チャートタイプ	コントロール名	API メンバー
折れ線	`IgrCategoryChart`	`chartType` = `Line`
極座標折れ線	`IgrDataChart`	`IgrPolarLineSeries`
ラジアル折れ線	`IgrDataChart`	`IgrRadialLineSeries`
積層型折れ線	`IgrDataChart`	`IgrStackedLineSeries`
積層型 100% 折れ線	`IgrDataChart`	`IgrStacked100LineSeries`