指针单击Vue ChatJS重定向

Question

我正在使用https://vue-chartjs.org/，我正在生成一个Line Chart，一切都很好。

我想做的是：

每当用户单击指针时，我都会尝试重定向用户。

请查查截图

​

例如，每当单击第一个指针时，用户就会重定向到invoices/month_of_the_pointer。

“守则”：

chart_data: {
  labels: ['January', 'February', 'March', 'April'],
  datasets: [
    // GENERATED DYNAMICALLY FROM A FUNCTION
  ],
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        callback: function(label, index, labels) {
          return env.EGP_CURRENCY + label;
        },
      },
      gridLines: {
        display: true
      },
    }],
    xAxes: [ {
      gridLines: {
        display: false
      }
    }]
  },
  legend: {
    display: true
  },
  responsive: true,
  maintainAspectRatio: false
},

我试过的是：

我尝试添加onClick回调，它返回单击事件，但不仅仅是在指针上，它甚至在所有图表中都返回单击。

onClick: function(evt) {
  console.log(evt);
},

Answer 1

首先，您需要访问curent Chart实例。我喜欢这个GitHub问题，其中作者声明当前实例保存在this.$data._chart中。

然后应该调用实例的getElementsAtEvent方法，传递一个event作为第一个参数。

调用图表实例上的getElementsAtEvent(event)传递event或jQuery event的参数，将返回位于该事件相同位置的point元素。此功能对于实现基于DOM的工具提示或触发应用程序中的自定义行为可能很有用。

this.$data._chart.getElementsAtEvent(event);

然后，实现您的自定义登录，这取决于该方法的返回值(如果您使用的是Vue路由器：this.$router.push("/path/to/redirect");)。