单击图表元素时如何重定向用户答案

【问题标题】：How to redirect user when clicking on a Chart element单击图表元素时如何重定向用户
【发布时间】：2018-09-04 07:42:17
【问题描述】：

我正在使用react-chartJs-2 库来显示图表。假设，用户点击条形图/甜甜圈图部分，他必须被重定向到特定页面。以下是我为 DoughnutChart 编写的代码：

ChartDisplay.jsx

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

甜甜圈.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

【问题讨论】：

标签： javascript reactjs react-chartjs

【解决方案1】：

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

<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 可能包含多个元素，例如在堆叠条形图的情况下（在这种情况下，它包括单击的条形图的所有元素）。

【讨论】：

非常感谢 Timur 提供的恰当示例。
我正在尝试以这种方式添加动态链接：<Doughnut data={data} onElementsClick={data => { this.props.handleTabClick.bind(this.state.currentObj, 'view_page', this.props.pageId, 'ei') }} /> 但没有任何反应。我在 Donughnut 页面中添加了 handleTabClick 和 pageId
嗯。我不确定你为什么使用bind - 这只会在函数范围内绑定this，但不会调用它。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。也许您需要的是onElementsClick={data => { this.props.handleTabClick(this.state.currentObj, 'view_page', this.props.pageId, 'ei') }}... 否则最好将其作为一个单独的问题发布，并提供更多上下文（handleTabClick 函数以及如何使用该组件）。希望对您有所帮助。
如何获取被点击的元素数据？前任。如果图表有2 categories - manual, automation。我想如果用户点击手册然后返回手册。
尝试将onElementsClick 收到的参数记录到控制台并查看其结构 - 此信息与此参数一起传递。

【解决方案2】：

这是一个点击饼图的快速解决方案

import { Pie } from 'react-chartjs-2'
        <Pie
            getElementAtEvent={(data) => {
                if(data.length >= 1){
                    const dataItem: any  = data[0]
                    const index = dataItem.index
                    const foundLabel = props.labels[index]
                    // redirect or do stuff
                }
            }}

【讨论】：