Javascript 通过单击图表js+打印列表；反应

您好，我在打印一个警报（通过单击其中一个部分）时遇到问题，在chart.js+react中打印一个特定答案的用户列表这是我的图表组件

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;

以下是我请求的json响应：

数据：

[
  {
    "Respuesta": "A",
    "porcentaje": 7,
    "quien": [
      "1",
      "visita1"
    ]
  },
  {
    "Respuesta": "B",
    "porcentaje": 3,
    "quien": [
      "coco"
    ]
  },
  {
    "Respuesta": "C",
    "porcentaje": 3,
    "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"
    ]
  }
]

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;

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

---

在我单击的函数中，如何传递饼图特定部分的“安静”列表？因此，在警报中，我可以打印该部分的列表，我将此用作指南，但我很难调整它以作出反应。在一些混合教程和指南之后，我提出了解决方案

Piechart.js:

[
  {
    "Respuesta": "A",
    "porcentaje": 7,
    "quien": [
      "1",
      "visita1"
    ]
  },
  {
    "Respuesta": "B",
    "porcentaje": 3,
    "quien": [
      "coco"
    ]
  },
  {
    "Respuesta": "C",
    "porcentaje": 3,
    "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"
    ]
  }
]

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;

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

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

剪辑功能：

[
  {
    "Respuesta": "A",
    "porcentaje": 7,
    "quien": [
      "1",
      "visita1"
    ]
  },
  {
    "Respuesta": "B",
    "porcentaje": 3,
    "quien": [
      "coco"
    ]
  },
  {
    "Respuesta": "C",
    "porcentaje": 3,
    "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"
    ]
  }
]

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;

        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个），我不知道发生了什么，也不知道如何解决这个问题，我希望这对某些人有用