通过单击图表Chart js + react打印列表

如何解决通过单击图表Chart js + react打印列表

嗨，我在打印警报时遇到了麻烦（通过单击部分之一），在chart.js中有特定答案的用户列表+在这里反应是我的图表组件

Piechart.js

import React,{ Component } from 'react';
import {Chart} from 'react-chartjs-2';

class Piechart extends Component {
    constructor(props){
        super(props)
        this.chartReference = React.createRef();
        this.state = {
            data:[]
        };
    }

    async componentDidMount(){
        const url = "https://api-tesis-marco.herokuapp.com/api/v1/questiondata/"+this.props.title;
        const data = await fetch(url)
        .then(response => response.json());
        this.setState({data:data});

        this.myChart = new Chart(this.chartReference.current,{
            type: 'pie',data:{
                labels: this.state.data.map(d=>d.Respuesta),datasets: [{
                    data: this.state.data.map(d=>d.porcentaje),backgroundColor: this.props.colors
                }],},options: {
                title: {
                    display: true,text: this.props.title,fontSize: 20,fontStyle: 'bold'
                },legend: {
                    position:'right'
                },onClick: clicked
            }
        });

        function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                
                alert();
            }
        }
    }
    

    
    render(){
        return(
            <canvas ref={this.chartReference} />
        )
    }
}


export default Piechart;

//i having troubles passing the lists data of my request

function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                //i don't know what to do here
                alert();
            }
        }

这是我的请求的json响应：

数据：

[
  {
    "Respuesta": "A","porcentaje": 7,"quien": [
      "1","visita1"
    ]
  },{
    "Respuesta": "B","porcentaje": 3,"quien": [
      "coco"
    ]
  },{
    "Respuesta": "C","quien": [
      "Dani3l"
    ]
  },{
    "Respuesta": "D","porcentaje": 10,"quien": [
      "Gabi","test","visita prueba"
    ]
  },{
    "Respuesta": "No ha respondido","porcentaje": 76,"quien": [
      "9punto5","Colita de algodón","KarmenQueen","Prueba","ancova","cehum2","chuky","dev","felipe","gabs","icom2019","invunche","john","laura","marian","marti","pablazozka","prueba","test1","titicaco","visita 1","visita test"
    ]
  }
]

如何在单击的函数中传递饼图特定部分的“查询”列表？因此，在警报中我可以打印该部分的列表，我以此为指导{{3} }，但对我来说很难适应它

解决方法

在混合了一些教程和指南之后，我提出了解决方案

Piechart.js：

import React,{ Component } from 'react';
import {Chart} from 'react-chartjs-2';

class Piechart extends Component {
    constructor(props){
        super(props)
        this.chartReference = React.createRef();
        this.state = {
            data:[]
        };
    }

    async componentDidMount(){
        const url = "https://api-tesis-marco.herokuapp.com/api/v1/questiondata/"+this.props.title;
        const data = await fetch(url)
        .then(response => response.json());
        this.setState({data:data});

        var datasets = [{data: this.state.data.map(d=>d.Count),backgroundColor: this.props.colors
        },{
            data: this.state.data.map(d=>d.Percent)
        },{
            data: this.state.data.map(d=>d.Who)}]

        this.myChart = new Chart(this.chartReference.current,{
            type: 'pie',data:{
                labels: this.state.data.map(d=>d.Answer),datasets: [{
                    data: datasets[0].data,backgroundColor: datasets[0].backgroundColor
                }] 
            },options: {
                title: {
                    display: true,text: this.props.title,fontSize: 20,fontStyle: 'bold'
                },legend: {
                    position:'right'
                },tooltips:{
                    callbacks: {
                        title: function(tooltipItem,data) {
                          return 'Respuesta:'+data['labels'][tooltipItem[0]['index']];
                        },label: function(tooltipItem,data) {
                          return 'Total:'+data['datasets'][0]['data'][tooltipItem['index']];
                        },afterLabel: function(tooltipItem) {
                          var dataset = datasets[1];
                          var total = dataset['data'][tooltipItem['index']]
                          return '(' + total+ '%)';
                        }
                      },backgroundColor: '#FFF',titleFontSize: 16,titleFontColor: '#0066ff',bodyFontColor: '#000',bodyFontSize: 14,displayColors: false
                },onClick: clicked
            }
        });

        function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                var idx = element[0]['_index'];
                var who = datasets[2].data[idx];
                alert(who);
            }
        }
    }
    

    
    render(){
        return(
            <canvas ref={this.chartReference} />
        )
    }
}


export default Piechart;

如您所见，我仅在外部设置数据集数组

 var datasets = [{
            data: this.state.data.map(d=>d.Count),{
            data: this.state.data.map(d=>d.Who)}]

这包含请求的所有数据集，然后在图表实例中，我仅传递要绘制的数据集，然后对于我的问题，在单击的函数中，仅调用包含用户列表的数组元素具体答案

喜欢的功能：

        function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                var idx = element[0]['_index'];
                var who = datasets[2].data[idx];
                alert(who);
            }
        }

我也做了一个自定义的工具提示，但是我对此有一个问题（默认工具提示是相同的），因为我使用此组件绘制4个饼图，但是当我将鼠标悬停在4个图表中的2个图表中工具提示，显示工具提示的2个图表是随机的（当刷新localhost从4个图表中随机选择2个时），我不知道发生了什么或如何解决此问题，我希望这对某人有用