[英]How to redirect user when clicking on a Chart element
I am using react-chartJs-2 library to display the charts.我正在使用react-chartJs-2库来显示图表。 Suppose, user clicks on the bar/Doughnut chart section he must be redirected to a specific page.假设,用户点击条形图/甜甜圈图部分,他必须被重定向到特定页面。 Following is the code I have done for DoughnutChart:以下是我为 DoughnutChart 所做的代码:
<div className="DonutChartSection" >
<Doughnut labelArray = {this.state.labelArr} DataArray = {this.state.DoughnutDataArr} colorArray = {this.state.DoughnutColorArr} title={"Employees"} />
</div>
Doughnut.jsx 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> ); } };
I went through the github page and found the following event which can be used for click event but can't figure out how can I use it in my code.我浏览了 github 页面,发现以下事件可用于单击事件,但不知道如何在我的代码中使用它。
https://github.com/jerairrest/react-chartjs-2#onelementsclick--getelementsatevent-function https://github.com/jerairrest/react-chartjs-2#onelementsclick--getelementsatevent-function
Indeed, you actually answered your question already: onElementsClick
can be used to execute an action when user clicks on an element of the chart.实际上,您实际上已经回答了您的问题: onElementsClick
可用于在用户单击图表元素时执行操作。 onElementsClick
is a prop of the chart itself, so: 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";
}} />
Note that elems
may include more than one element, for example in case of a stacked bar chart (in which case it includes all elements of a bar clicked).请注意, elems
可能包含多个元素,例如在堆积条形图的情况下(在这种情况下,它包括单击的条形图的所有元素)。
here is a actually quick solution for clicking on a pie Chart这是单击饼图的实际快速解决方案
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
}
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.