Как перенаправить пользователя при нажатии на элемент диаграммы - PullRequest
Новая
       12

Как перенаправить пользователя при нажатии на элемент диаграммы

0 голосов
/ 04 сентября 2018

Я использую библиотеку реагировать на диаграммыJs-2 для отображения графиков. Предположим, пользователь нажимает на секцию гистограммы / бублика, он должен быть перенаправлен на определенную страницу. Ниже приведен код, который я сделал для DoughnutChart:

  1. ChartDisplay.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 и обнаружил следующее событие, которое можно использовать для события click, но не могу понять, как его использовать в моем коде.

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

1 Ответ

0 голосов
/ 05 сентября 2018

Действительно, вы уже ответили на свой вопрос: 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 может включать в себя более одного элемента, например, в случае столбчатой ​​диаграммы с накоплением (в этом случае она включает в себя все элементы нажатой панели).

...