インタラクション

名前空間：options.interaction、グローバルなインタラクション設定はChart.defaults.interactionです。チャートのインタラクションをトリガーするイベントを設定するには、イベントを参照してください。

名前	タイプ	デフォルト	説明
mode	文字列	'nearest'	インタラクションに表示される要素を設定します。詳細はインタラクションモードを参照してください。
intersect	真偽値	true	trueの場合、マウス位置がチャート上のアイテムと交差する場合にのみインタラクションモードが適用されます。
axis	文字列	'x'	距離の計算に使用される方向を定義するために、'x'、'y'、'xy'、または'r'に設定できます。 'index'モードではデフォルトで'x'、'dataset'モードと'nearest'モードでは'xy'になります。
includeInvisible	真偽値	false	trueの場合、チャート領域外の不可視のポイントもインタラクションの評価に含まれます。

デフォルトでは、これらのオプションはホバーとツールチップの両方のインタラクションに適用されます。 options.hover名前空間に同じオプションを設定することもできます。この場合、ホバーインタラクションにのみ影響します。同様に、options.plugins.tooltip名前空間にオプションを設定して、ツールチップのインタラクションを個別に設定することもできます。

イベント

次のプロパティは、チャートがイベントとどのようにインタラクトするかを定義します。名前空間：options

名前	タイプ	デフォルト	説明
events	文字列配列	['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']	eventsオプションは、チャートがリッスンするブラウザイベントを定義します。これらのイベントはそれぞれホバーをトリガーし、プラグインに渡されます。 詳細...
onHover	関数	null	chartArea上でいずれかのイベントが発生したときに呼び出されます。イベント、アクティブな要素（バー、ポイントなど）の配列、およびチャートが渡されます。
onClick	関数	null	chartArea上でイベントが'mouseup'、'click'、または'contextmenu'タイプのときに呼び出されます。イベント、アクティブな要素の配列、およびチャートが渡されます。

イベントオプション

たとえば、チャートがクリックイベントのみに応答するようにするには、次のようにします。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // This chart will not respond to mousemove, etc
    events: ['click']
  }
});

各プラグインのイベントは、プラグインオプションで（許可された）イベント配列を定義することでさらに制限できます。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // All of these (default) events trigger a hover and are passed to all plugins,
    // unless limited at plugin options
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    plugins: {
      tooltip: {
        // Tooltip will only receive click events
        events: ['click']
      }
    }
  }
});

mouseoutなど、chartArea上で発生しないイベントは、シンプルなプラグインを使用してキャプチャできます。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // these are the default events:
    // events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
  },
  plugins: [{
    id: 'myEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
      const event = args.event;
      if (event.type === 'mouseout') {
        // process the event
      }
    }
  }]
});

プラグインの詳細については、プラグインを参照してください。

イベントをデータ値に変換する

クリックなどのイベントを取得し、イベントが発生したチャート上のデータ座標を見つけることはよくあることです。 Chart.jsは、このプロセスを簡単にするヘルパーを提供します。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        onClick: (e) => {
            const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
            // Substitute the appropriate scale IDs
            const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
            const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
        }
    }
});

バンドラーを使用する場合、ヘルパー関数は個別にインポートする必要があります。これについての詳しい説明は、統合ページをご覧ください。

モード

interaction、hover、またはtooltipsを介してグラフとのインタラクションを設定する場合、さまざまなモードを使用できます。

options.hoverとoptions.plugins.tooltipはoptions.interactionから拡張されます。そのため、mode、intersect、またはその他の共通設定がoptions.interactionでのみ設定されている場合、ホバーとツールチップの両方がそれに従います。

モードとその`intersect`設定との連携動作については、以下で詳しく説明します。

ツールチップのインタラクションのサンプルで、ツールチップでさまざまなモードがどのように機能するかを確認してください。

point

ポイントと交差するすべてのアイテムを見つけます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'point'
        }
    }
});

nearest

ポイントに最も近い距離にあるアイテムを取得します。最も近いアイテムは、チャートアイテム（ポイント、バー）の中心までの距離に基づいて決定されます。 `axis`設定を使用して、距離計算で考慮される座標を定義できます。 `intersect`がtrueの場合、これはマウス位置がグラフ内のアイテムと交差する場合にのみトリガーされます。これは、ポイントがバーの背後に隠れているコンボチャートに非常に役立ちます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'nearest'
        }
    }
});

index

同じインデックスのアイテムを見つけます。 `intersect`設定がtrueの場合、最初に交差するアイテムを使用してデータのインデックスが決定されます。 `intersect`がfalseの場合、x方向で最も近いアイテムを使用してインデックスが決定されます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'index'
        }
    }
});

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

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        interaction: {
            mode: 'index',
            axis: 'y'
        }
    }
});

dataset

同じデータセット内のアイテムを見つけます。 `intersect`設定がtrueの場合、最初に交差するアイテムを使用してデータのインデックスが決定されます。 `intersect`がfalseの場合、最も近いアイテムを使用してインデックスが決定されます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'dataset'
        }
    }
});

x

位置の`X`座標のみに基づいて交差するすべてのアイテムを返します。垂直カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'x'
        }
    }
});

y

位置の`Y`座標に基づいて交差するすべてのアイテムを返します。これは水平カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'y'
        }
    }
});

カスタムインタラクションモード

Chart.Interaction.modesマップに関数を追加することで、新しいモードを定義できます。これらの実装には、Chart.Interaction.evaluateInteractionItems関数を使用できます。

例

import { Interaction } from 'chart.js';
import { getRelativePosition } from 'chart.js/helpers';
/**
 * Custom interaction mode
 * @function Interaction.modes.myCustomMode
 * @param {Chart} chart - the chart we are returning items from
 * @param {Event} e - the event we are find things at
 * @param {InteractionOptions} options - options to use
 * @param {boolean} [useFinalPosition] - use final element position (animation target)
 * @return {InteractionItem[]} - items that are found
 */
Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const position = getRelativePosition(e, chart);
  const items = [];
  Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {
    if (element.inXRange(position.x, useFinalPosition) && myCustomLogic(element)) {
      items.push({element, datasetIndex, index});
    }
  });
  return items;
};
// Then, to use it...
new Chart.js(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'myCustomMode'
        }
    }
})

TypeScriptを使用している場合は、新しいモードも登録する必要があります。

declare module 'chart.js' {
  interface InteractionModeMap {
    myCustomMode: InteractionModeFunction;
  }
}