React スパークライン

    Ignite UI for React スパークラインは、軽量なチャート コントロールです。グリッド セル内などのコンパクトなレイアウト内でのレンダリングを目的としていますが、単独でレンダリングすることもできます。Sparkline には、チャートの種類、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズが可能ないくつかの視覚的要素とそれに対応する機能があります。

    React スパークラインの例

    次の例は、使用可能なすべての異なる Sparkline のタイプを示しています。タイプは displayType プロパティの設定により定義されます。displayType プロパティが指定されていない場合は、既定では Line 型が表示されます。

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

    スパークラインの推奨事項

    スパークライン チャートはプロジェクトに適していますか?

    他のチャート コントロールと比較したスパークラインの利点は、グリッド セルなどの限られたスペースに、そのすべてのビジュアル要素を表示できることです。

    React スパークライン コンポーネントには、最高、最低、最初、最後、そして負の値を示す楕円形のアイコンによってデータ ポイントをマークする機能があります。マーカーは、任意のシェイプ、色、または画像でカスタマイズできます。

    スパークライン ユースケース

    • チャートを表示するためのコンパクトなスペースがある場合。
    • 週ごとの収益など、一連の値の傾向を示したい場合。

    スパークラインのベスト プラクティス

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

    次の場合にスパークラインを使用しないでください:

    • データを詳細に分析する必要がある場合。
    • データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。

    スパークラインのデータ構造

    • 一次元データが必要です。
    • データ セットには少なくとも 2 つの数値フィールドを含む必要があります。
    • データ ソース フィールドのテキストを使用して、X 軸の最初と最後のラベルを表示できます。

    スパークラインのタイプ

    React スパークライン コンポーネントは、それに応じて displayType プロパティを設定することにより、以下のスパークライン タイプをサポートしています。

    • Line: スパークラインの折れ線チャート タイプを数値データで表示し、データ ポイントを線分で接続します。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
    • Area: スパークラインのエリア チャート タイプを数値データで表示します。これは折れ線タイプに似ており、各線が描画された後に領域を閉じる追加の手順があります。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
    • Column: スパークラインの縦棒チャート タイプを数値データで表示します。縦棒と表現される場合もあります。このタイプは単一データ ポイントを描画できますが、Sparkline に最小の値範囲プロパティ (minimum) を指定する必要があるので、供給される単一データ ポイントは表示可能です。そうでなければ、値は最小値として取り扱われ、表示されません。
    • WinLoss: このタイプは、外観は柱状チャートに似ています。各列の値はデータセットの正の最大値 (正の値の場合) または負の最小値 (負の値の場合) に等しくなります。ウィンまたはロス シナリオを示すのが目的です。Win/Loss チャートを正しく表示するには、データセットには正の値と負の値がなければなりません。WinLoss スパークラインが、数値のコレクションにバインドできる Line タイプなどの他のタイプと同じデータにバインドされている場合、React スパークライン コンポーネントはそのコレクションから最大値と最小値の 2 つの値を選択し、それらの値に基づいてスパークラインをレンダリングします。

    マーカー

    React スパークライン コンポーネントを使用すると、マーカーをシリーズ上の円形のアイコンとして表示して、X/Y 座標に基づいて個々のデータポイントを示すことができます。マーカーは、表示タイプが LineArea、および Column のスパークラインに設定できます。WinLoss 型のスパークラインは、現在マーカーを設定できません。デフォルトでは、マーカーは表示されませんが、対応するマーカーの可視性プロパティを設定することで有効にできます。

    スパークライン内のマーカーは、以下の場所を任意に組み合わせて配置できます。

    • All (すべて): スパークライン内のすべてのデータ ポイントにマーカーを表示します。
    • Low (低値): 最低値のデータ ポイントにマーカーを表示します。最小値に複数の点がある場合は、その値を持つ各点に表示されます。
    • High (高値): 最低値のデータ ポイントにマーカーを表示します。最高値に複数のポイントがある場合は、その値を持つ各ポイントに表示されます。
    • First (始値): スパークラインの最初のデータポイントにマーカーを表示します。
    • Last: (終値)スパークラインの最後のデータ ポイントにマーカーを表示します。
    • Negative (負数): スパークラインにプロットされた負のデータ点にマーカーを表示します。

    上記のすべてのマーカーは、色、可視性、およびサイズの観点で関連マーカー タイプのプロパティを使用してカスタマイズできます。たとえば、上記の Low マーカーは、lowMarkerBrushlowMarkerVisibilitylowMarkerSize の各プロパティを持ちます。

    標準範囲

    React スパークラインの通常の範囲機能は、データが視覚化されているときに定義済みの意味のある範囲を表す水平方向の縞模様です。標準範囲は、指定した色のアウトラインで網掛けエリアとして設定できます。

    通常の範囲は、最大データ ポイントよりも広い場合もあれば、それを超える場合もあります。また、しきい値インジケータとして機能するように、スパークラインの Line 表示タイプと同じ幅にすることもできます。正常範囲の幅は、正常範囲を表示するために最低限必要な以下の 3 つのプロパティによって決まります。

    既定では、標準範囲は表示されません。有効にすると、標準範囲は薄い灰色の外観で表示されますが、normalRangeFill プロパティを使用して構成することもできます。

    displayNormalRangeInFront プロパティを設定することで、React スパークラインのプロットされたシリーズの前または後ろに標準範囲を表示するかどうかを設定することもできます。

    トレンドライン

    React スパークラインは、実際のスパークライン レイヤーの上に別のレイヤーとして表示される一連のトレンドラインをサポートしています。トレンドラインを表示するには、trendLineType プロパティを使用します。

    トレンドラインは、チャートがバインドされているデータの値を使用して、trendLineType プロパティで指定されたアルゴリズムに従って計算されます。

    トレンドラインは一度に 1 つだけ表示でき、デフォルトではトレンドラインは表示されません。

    以下のサンプルは、ドロップダウンを介して利用可能なすべてのトレンドラインを示しています:

    不明な値の補間

    React スパークラインは、不明な値を検出し、指定された補間アルゴリズムを介して不明な値のためのスペースを描画することができます。データに null 値が含まれていて、この機能を使用しない場合、つまり補間が指定されていない場合、不明な値はプロットされません。

    未知の値をプロットするために、React スパークラインの unknownValuePlotting プロパティを設定することができます。以下のサンプルは、unknownValuePlotting プロパティの値の違いを示しており、チェックボックスを使用してオンとオフを切り替えることができます。

    データ グリッドのスパークライン

    React スパークラインは、データ グリッドのテンプレート列またはテンプレートをサポートする他の UI コントロールに埋め込むことができます。以下のコード例ではその方法を示します。

    その他のリソース

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

    API リファレンス

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