Web Components 注釈
このトピックでは、Web Components カテゴリ チャート コンポーネントの注釈やインタラクションについて説明します。
Web Components 注釈の例
十字線レイヤー
カテゴリ チャートの十字線レイヤーは、各ターゲット シリーズの実際の値に一致する十字線を提供します。十字線タイプは、Horizontal、Vertical、Both があります。crosshairsSnapToData
プロパティを true に設定してデータに十字線のスナップできます。十字線がデータ ポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。
<igc-category-chart
id="chart"
width="400px"
height="400px"
crosshairs-display-mode="Horizontal"
crosshairs-snap-to-data="true"
crosshairs-annotation-enabled="true">
</igc-category-chart>
最終値レイヤー
カテゴリ チャート コンポーネントの最終値レイヤーは、シリーズに表示された最終値の軸に沿ったクイックビューをサポートします。
<igc-category-chart
id="chart"
final-value-annotations-visible="true">
</igc-category-chart>
コールアウト レイヤー
カテゴリ チャート コンポーネントのコールアウト レイヤーは、データで指定された X/Y 位置にテキスト コールアウトを表示します。
<igc-category-chart
id="chart"
width="800px"
height="400px"
callouts-visible="true">
</igc-category-chart>
let chart = (document.getElementById("chart") as IgcCategoryChartComponent);
chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";