Как построить график?

Question

[ProzorovskiyRostislva]

{AF: 652230, AX: 1580, AL: 28748, DZ: 2381741, AS: 199, …}

Есть данные которые приходят через сервер в таком виде как выше. а вот сам код

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
const DEFAULT_DATA = [];
class Graph extends Component{
     constructor(props){
      super(props)
    this.state={

          data:[], 
          result:[],
          labels:['area','alphaCode']
    }
  }
  componentDidMount(){
      axios.get('https://restcountries.eu/rest/v2/all')
    .then(response => {
          const data = response.data;
          const result = Object.assign({}, ...Object.keys(data).map(k => ({[data[k].alpha2Code]: data[k].area})));       
          this.setState({
         data:response.data,
             result:result

      })
          console.log(this.state.result)
    })
    .catch((error) => {
          console.log("error", error)
    })
  }
render() { 
    return (
       <div className="chart">

            </div>
        )
}
}
export default Graph;

С помощью какой либы можно построить график?Или может нужно для этого как-нибудь поменять данные?

Answer 1

[Максим]

-1) нужно разобраться с большим количеством вопросов по теории разработки и основам языка. (пока опустим)
по делу:
0) нужно выбрать библиотеку для отрисовки графиков.
1) нужно приготовить данные для этой библиотеки
2) нужно отрисовать компонент из библиотеки с графиками и туда передать в качестве props данные.

Окей, разберемся подробнее:
0) допустим это https://github.com/jerairrest/react-chartjs-2
Какой план работ? Идем по ссылке на гитхаб, там видим, что это лишь "реакт-обертка" для библиотеки - www.chartjs.org/docs/latest - отлично! Смотрим документацию, видим следующий пример:

var myChart = new Chart(ctx, {
    type: 'bar', // тип диаграммы
    data: { // ДАННЫЕ
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], // МЕТКИ - здесь ваши AF, AX, AL ... в массиве
        datasets: [{
            label: '# of Votes', 
            data: [12, 19, 3, 5, 2, 3], // ДАННЫЕ - здесь ваши "количество говорящих" - 652230, 1580, 28748.. - так же в массиве и в том же порядке.
            backgroundColor: [ // настройки цветов... и значения остальных пунктов, так же можно найти в документации.
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: { // ЕЩЕ опции, тоже значения опций в документации, можно просто опустить.
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Так же, почти у всех настроек есть значения по умолчанию, поэтому большинство из них можно опустить.

2) отрисовка компонента - это уже нужно смотреть в документации реакт-обертки:

import {Doughnut} from 'react-chartjs-2'; // отрисует Doughunt диаграмму, вам наверняка нужны Line или Bar

<Doughnut data={...} /> // а вот и сама отрисовка, это нужно сунуть в ваш div, где в data должен быть объект*

2.5) разжую про объект:

const myData = { // минимальный пример
labels: ["AF", "AX", "AL"], // МЕТКИ - здесь ваши AF, AX, AL ... в массиве
datasets: [{
    label: '# of Votes', 
    data: [652230, 1580,28748], // ДАННЫЕ - здесь ваши "количество говорящих" - 652230, 1580, 28748.. - так же в массиве и в том же порядке.
}]
}

Итого ваш рабочий пример с "жестко записанными данными":

import {Bar} from 'react-chartjs-2';
...
render() {
 const myData = { // минимальный пример
   labels: ["AF", "AX", "AL"], // МЕТКИ - здесь ваши AF, AX, AL ... в массиве
   datasets: [{
    label: '# of Votes', 
    data: [652230, 1580,28748], // ДАННЫЕ - здесь ваши "количество говорящих" - 652230, 1580, 28748.. - так же в массиве и в том же порядке.
   }]
  }
 return (
    <div><Bar data={myData} /></div>
 )

само собой разумеется, что вам нужно вместо жестко описанной myData формировать переменную на основе тех данных, что вы получили от сервера и записывать ее в state, а в компоненте из state считывать. Тогда при получении новых данных от сервера будет происходить перерисовка.