Chart.js - にほんご。

Interaction Modes

更新日: 2018-09-03

hoverやツールチップをグラフに適用し、インタラクションを定義した場合、 いくつかのモードを設定することができます。

モードの詳細は下記で説明します。 また、intersectとの関係によって、どのように動作するかを記載します。

point

マウスカーソルが重なっている全てのアイテムを表示します。

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

デモ

"February"にカーソルを合わせると、AとBのツールチップが表示されます。

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})
HTML
<canvas id="myChart"></canvas>

nearest

最も近いアイテムを表示します。 "最も近いアイテム"は、アイテム(point、bar)の中心からの距離から算出します。 もし同じ距離のアイテムが2つ以上ある場合、もっとも範囲が狭いエリアを使用します。 intersecttrueの場合、 マウスがグラフの項目と重なっている場合のみトリガーされます。 コンボチャートで、バーの後ろにポイントが隠れてしまっている場合に、とても便利です。

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

デモ

マウスカーソルに近いアイテムのツールチップを表示します。

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'bar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'nearest',
            intersect: false,
        }
    }
})
HTML
<canvas id="myChart"></canvas>

single(廃止予定)

マウスカーソルが重なっているポイントの最初のアイテムを表示します。 intersecttrueの場合、nearestと似た挙動になります。


label(廃止予定)

indexを参照してください。


index

同じインデックスのアイテムを表示します。 intersecttrueの場合、 マウスカーソルが重なったポイントの最初のアイテムを使ってインデックスを決定します。 intersectfalseの場合、 X方向に一番近いアイテムを使ってインデックスを決定します。

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

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

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

デモ

カーソルを併せた要素と同じ月の要素を表示します。

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'horizontalBar',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'horizontalBar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
})
HTML
<canvas id="myChart"></canvas>

x-axis(廃止予定)

intersectfalseにしたindexと似た挙動になります。


dataset

同じデータセット内のアイテムを表示します。 intersecttrueの場合、 マウスカーソルが重なったポイントの最初のアイテムを使ってインデックスを決めます。 intersectfalseの場合、 一番近いアイテムを使ってインデックスを決定します。

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

デモ

カーソルを併せた要素とデータセットの情報を表示します。

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'bar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'dataset',
        }
    }
})
HTML
<canvas id="myChart"></canvas>

x

マウスカーソル位置を基準として、X座標上の全てのアイテムを表示します。 垂直カーソルを実装する場合に便利です。 このモードはcartesianチャートの場合のみ適用可能です。

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

デモ

カーソル合わせた要素のX座標に一致するアイテムの情報を表示します。

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'x',
        }
    }
})
HTML
<canvas id="myChart"></canvas>

y

マウスカーソル位置を基準として、Y座標上の全てのアイテムを表示します。 水平カーソルを実装する場合に便利です。 このモードはcartesianチャートの場合のみ適用可能です。

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

デモ

カーソル合わせた要素のY座標に一致するアイテムの情報を表示します。
(例えば"March"の"B"と"July"の"B"等)

JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'x',
        }
    }
})
HTML
<canvas id="myChart"></canvas>


© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。