#カスタムインタラクションイベント

chart.off('click');
chart.on('click', (params) => {
  const { seriesIndex, dataIndex } = params;
  // 現在のデータポイントをハイライト表示
  chart.dispatchAction({ type: 'highlight', seriesIndex, dataIndex });
  // 他のハイライトを解除
  chart.dispatchAction({ type: 'downplay', seriesIndex });
});

chart.off('click');
chart.on('click', (params) => {
  const order_date = params.data[0]
  
  // 方法1：アプリケーション内部での遷移。ページのリロードを強制しないため、ユーザー体験が向上します（推奨）。相対パスのみでOKです。
  ctx.router.navigate(`/new-path/orders?order_date=${order_date}`)

  // 方法2：外部ページへの遷移。完全なURLが必要です。
  window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`

  // 方法3：新しいタブで外部ページを開く。完全なURLが必要です。
  window.open(`https://www.host.com/new-path/orders?order_date=${order_date}`)
});

chart.off('click');
chart.on('click', (params) => {
  ctx.openView(ctx.model.uid + '-1', {
    mode: 'dialog',
    size: 'large',
    defineProperties: {}, // 新しいダイアログで使用するためのコンテキスト変数を登録します。
  });
});