Блог

Привет, у меня возникли проблемы с печатью в предупреждении (щелкнув одну из частей), список пользователей для конкретного ответа в 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;
  

 //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",
    "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"
    ]
  }
]
  

в моей функции clicked как я могу передать списки «quien» для определенной части моей круговой диаграммы?, поэтому в предупреждении я могу распечатать список этой части, я использую это в качестве руководстваhttps://jsfiddle.net/u1szh96g/208 / но мне сложно адаптировать это к 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});

        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;
  

как вы можете видеть, я устанавливаю массив datasets только снаружи

  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)}]
  

это содержит все наборы данных запроса, затем в экземпляре диаграммы я передаю только тот набор данных, который я хочу построить, затем для моего вопроса в функции 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);
            }
        }
  

я также создал пользовательскую всплывающую подсказку, но у меня есть проблема с этим (со всплывающей подсказкой по умолчанию та же), потому что я использую этот компонент для построения 4 диаграмм элементов, но при наведении курсора мыши только 2 из 4 диаграмм показывают мне всплывающую подсказку, 2 диаграммы, которые показывают всплывающую подсказку, являются случайными (при обновлении localhost случайным образом выбираются 2 из 4 диаграмм), и я не знаю, что произошло или как это исправить, я надеюсь, что это кому-то полезно