インタラクションモード

hover(マウスオーバー)またはtooltips(ツールチップ)を介してグラフとのインタラクションを設定する場合、いくつかのmode(モード)が利用できます。

以下では、このモードについてと、モードがintersect設定とどのように協調して動作するかについて、詳しく説明します。

point

マウスポインタと交差するすべてのアイテム(訳注: グラフ上の要素。点、棒など。)を取得します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})

nearest

マウスポインタに最も近いアイテムを取得します。最も近いアイテムは、チャートアイテム（点、棒）の中心までの距離に基づいて決定されます。 2つ以上のアイテムが同じ距離にある場合は、最も小さいエリアを持つアイテムが選択されます。 intersectがtrueの場合、これは、マウスの位置がグラフアイテムと交差するときにだけトリガされます。これは、点が棒の内側に隠れているコンボチャートに使うと非常に便利です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest'
        }
    }
})

single (非推奨)

マウスポインタと交差する最初のアイテムを取得して返します。 intersect = trueで 'nearest'モードのように動作します。

label (非推奨)

'index' モードを参照してください。

index

同一インデックスのアイテムを取得します。 intersect設定がtrueである場合、最初に交差するアイテムがデータ内のインデックスを決定するために使用されます。 intersectがfalseの場合、x方向の最も近いアイテムがインデックスを決定するために使用されます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'index'
        }
    }
})

y方向に沿って検索する横棒グラフのようなチャートでindexモードを使用するには、v2.7.0で導入された axis設定を使用できます。この値を'y'に設定することにより、y方向が使用されます。

var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
})

x-axis (非推奨)

intersect = falseで 'index'モードのように動作します。

dataset

同一データセット内のアイテムを取得します。 intersect設定がtrueである場合、最初に交差するアイテムがデータ内のインデックスを決定するために使用されます。 intersectがfalseの場合、最も近いアイテムがインデックスを決定するために使用されます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'dataset'
        }
    }
})

x

アイテム位置のX座標のみに基づいて、交差するすべてのアイテムを返します。垂直カーソルの実装に便利です。これは直交座標系のみに適用されます

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

y

アイテム位置の Y座標に基づいて、交差するすべてのアイテムを返します。これは、水平カーソルの実装に役立ちます。これは、直交座標系にのみ適用されます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'y'
        }
    }
})

results matching ""

    No results matching ""