如何在JavaScript中创建通过单击饼图的某个部分触发的超链接？

我正在创建一个web应用程序（React），它使用7段圆环图访问不同的页面。我希望能够点击甜甜圈的一个部分，并被引导到我的网站上的另一个页面。我已经准备好了甜甜圈。我正在使用chartjs

import React from 'react'
import { Doughnut, defaults } from 'react-chartjs-2'


defaults.global.tooltips.enabled = false
defaults.global.legend.position = 'bottom'

const DoughnutChart = () => {
  return <div>
  <Doughnut
  data={{
      labels: ['Team 1', 'Team 2', 'Team 3', 'Team 4', 'Team 5', 'Team 6', 'Team 7'],
      datasets: [{
          cutoutPercentage: [50],
          label: 'Teams',
          data: [10, 10, 10, 10, 10, 10, 10],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(18, 235, 0, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(18, 235, 0, 1)'
          ],
          
          
          hoverBorderColor: [
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
            'rgbargba(191, 191, 191, 1)',
          ],
          borderWidth: 5
      }]
  }}
      height={400}
      width={400}
      options={{
          maintainAspectRatio: false
      }}
      
  />
  </div>



}

export default DoughnutChart

从“React”导入React
从“react-chartjs-2”导入{Doughnut，defaults}
defaults.global.tooltips.enabled=false
defaults.global.legend.position='bottom'
常数圆环图=（）=>{
返回
}
导出默认圆环图

我从未使用过charts.js，但从这个问题中，我解释了如何检索单击的甜甜圈段，

var-activePoints=chart.getElementsAtEvent（evt）

然后从他们的浏览器中，您可以调用导航器将您带到相应的页面。看看