我正在使用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--getelementsaevent-function