Angular チャート強調表示

すべての Angular チャートは、エンドユーザーがプロット領域に描画されたデータ項目の上にマウスカーソルを置いたときに、線、列、マーカーなどのビジュアルの強調表示をサポートします。強調表示は、IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent コントロールによってサポートされており、強調表示機能を使用するための同じ API を備えています。

Angular チャート強調表示の例

以下の例は、Angular チャートで使用できるさまざまな強調表示オプションを示しています。チェックボックスをクリックして強調表示タイプを有効にします。

Angular チャートの強調表示モードと動作

すべての Angular チャートは、さまざまな強調表示オプションをサポートしています。highlightingMode は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。highlightingBehavior は、強調表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。強調表示のモードと動作は、IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent コントロールでサポートされており、強調表示機能を使用するための同じ API を備えています。

Angular チャート凡例の強調表示

すべての Angular チャートは、凡例の強調表示をサポートしています。legendHighlightingMode を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域で強調表示されます。凡例の強調表示は、IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent コントロールでサポートされており、強調表示機能を使用するための同じ API を備えています。

強調表示レイヤー

Ignite UI for Angular IgxCategoryChartComponent は、データ項目にカーソルを合わせると 3 種類の強調表示を有効にできます。

シリーズハイライトは、ポインターがデータポイント上ある場合に、マーカーまたは列で表される単一のデータポイントをハイライトします。これは、isSeriesHighlightingEnabled プロパティを true に設定することで有効になります。
項目ハイライトは、その位置に縞模様の図形を描画したりマーカーを描画したりすることでシリーズの項目を強調表示します。これは、isItemHighlightingEnabled プロパティを true に設定することで有効になります。
カテゴリハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、isCategoryHighlightingEnabled プロパティを true に設定することで有効になります。

その他のリソース

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

API リファレンス

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

Angular チャート強調表示