javascript - 单击图表元素时如何重定向用户

Question

我正在使用 react-chartJs-2库来显示图表。假设，用户单击条形图/圆环图部分，他必须被重定向到特定页面。以下是我为 DoughnutChart 所做的代码:

1. 图表显示.jsx

<div className="DonutChartSection" >
   <Doughnut labelArray = {this.state.labelArr} DataArray = {this.state.DoughnutDataArr} colorArray = {this.state.DoughnutColorArr} title={"Employees"} />
</div>

1. Doughnut.jsx

   import React from 'react';
   import {Doughnut} from 'react-chartjs-2';
   
   Chart.defaults.global.defaultFontStyle = 'Bold';  
   Chart.defaults.global.defaultLegendPosition = 'left';
   
   export default class DoughnutChartView extends React.Component{
     constructor(props) {
        super(props);
        this.state = { };
     }
   
     render() {
       let data = {
           labels: this.props.labelArray,
           datasets: [{
               data: this.props.DataArray,
               backgroundColor: this.props.colorArray,
               hoverBackgroundColor: this.props.colorArray,
           }]
       } 
       return (
         <div>
         <span className="titleName" >{this.props.title}</span> 
           <Doughnut data={data}  />
         </div>
       );
     }
   };
   

我浏览了 github 页面，发现了以下可用于点击事件的事件，但不知道如何在我的代码中使用它。

https://github.com/jerairrest/react-chartjs-2#onelementsclick--getelementsatevent-function

Answer 1

事实上，您实际上已经回答了您的问题:onElementsClick 可用于在用户单击图表元素时执行操作。 onElementsClick 是图表本身的一个 Prop ，所以:

<Doughnut data={data} onElementsClick={elems => {
    // if required to build the URL, you can 
    // get datasetIndex and value index from an `elem`:
    console.log(elems[0]._datasetIndex + ', ' + elems[0]._index);
    // and then redirect to the target page:
    window.location = "https://example.com";
}} />

请注意，elems 可能包含多个元素，例如在堆叠条形图的情况下(在这种情况下，它包含单击的条形图的所有元素)。