ホバー操作プロパティ参照 (igDataChart)

トピックの概要

目的

このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

Adding igDataChart: igDataChart の追加:このトピックでは、igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。
igDataChart をデータへバインド: このトピックでは、igDataChart™ コントロールを各種データソース (JavaScript 配列、IQueryable、Web サービス) にバインドする方法について説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

ホバーインタラクションレイヤーは、ホバー操作のコンテキストに関係する series 基本クラスのプロパティおよびメソッドを継承します。たとえば、ホバー操作の設計ではマウスとは対話しないため、マウスイベントを起動しません。また、ホバーインタラクションレイヤーはデータを直接表示しないため、scrollIntoView のようなメソッドはこの機能には該当しません。

共通のプロパティ

以下の表で、ホバーインタラクションクラスより継承された series クラスプロパティを簡単に説明します。

プロパティ名	プロパティ型	説明
brush	brush	ホバーインタラクションレイヤーは、相互作用しているシリーズからその `brush` を継承します。ただし、`brush` プロパティを直接設定してオーバーライドできます。
outline	brush	このプロパティは、上記に示した `brush` プロパティと同じガイドラインに沿っています。
cursorPosition	point	このプロパティは、デフォルトのマウス位置 (NaN, NaN) でなく使用するワールド位置を指定します。このプロパティを設定すると、提供されるワールド位置に特定のレイヤーを固定します。注: ワールド位置に軸の全体範囲に対するカーソルのグローバル位置を表す 0 から 1 の範囲にある x 値と y 値があります。</>
isDefaultCrosshairBehaviorDisabled	bool	このプロパティは、シリーズのデフォルト十字線がチャート上のホバーインタラクションレイヤーであるときに無効になります。デフォルト値は True です。
useIndex	bool	このプロパティは、ホバーインタラクションレイヤーがシリーズインデックスを使用し、`igDataChart` コントロールに割り当てられる Brushes コレクションに色を予約するかどうかを指定します。デフォルト値は False です。
useLegend	bool	このプロパティは、ホバーインタラクションレイヤーを凡例に表示するかどうかを指定します。このプロパティを true に設定すると、凡例に表示する必要があるものとしてシリーズをインデックス化します。凡例で認識するためには、シリーズに単一の色を割り当てなければなりません。デフォルト値は False です。

メソッド名	メソッドのパラメーター	説明
moveCursorPoint	point	このプロパティにより、カーソルの動きをシミュレートできます。

十字線レイヤーに継承プロパティを設定する

例

以下のスクリーンショットは、以下の設定を使用して igDataChart コントロールの crosshairLayer の外観がどのようになるか示します。

プロパティ	値
cursorPosition	0.55, 0.55
useLegend	True

以下のコードはこの実装で使用されます。

JavaScript の場合:

<script type="text/javascript">    $(function () {
        $("#chart").igDataChart({
            dataSource: data,
            axes: [{
                type: "categoryX",
                name: "NameAxis",
                label: "CountryName",
            }, {
                type: "numericY",
                name: "PopulationAxis",
            }],
            series: [            
            {
                type: "column",
                name: "2005Population",
                xAxis: "NameAxis",
                yAxis: "PopulationAxis",
                valueMemberPath: "Pop2005"
            },            
            {
                type: "line",
                name: "1995Population",
                xAxis: "NameAxis",
                yAxis: "PopulationAxis",
                valueMemberPath: "Pop1995"
            },            
            {
                type: "crosshairLayer",
                name: "crosshairLayer",
                title: "crosshair",
                useInterpolation: false,
                transitionDuration: 500,                
                useLegend: "true",                
                cursorPosition: {x:0.5 , y:0.5}
            }]
        });
    });
</script>

Ignite UI | ヘルプトピック

ホバー操作プロパティ参照 (igDataChart)

トピックの概要

目的

前提条件

このトピックの内容

概要

共通のプロパティ

十字線レイヤーに継承プロパティを設定する

例

関連リンク

トピック

サンプル

Ignite UI | ヘルプ トピック

ホバー操作プロパティ参照 (igDataChart)

トピックの概要

目的

前提条件

このトピックの内容

概要

共通のプロパティ

十字線レイヤーに継承プロパティを設定する

例

関連リンク

トピック

サンプル

Ignite UI | ヘルプトピック