-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 считывать. Тогда при получении новых данных от сервера будет происходить перерисовка.
