Блог

Главная - Вопросы по программированию - создайте гистограмму с ячейками в react js

создайте гистограмму с ячейками в react js

#python #reactjs #histogram

Вопрос:

Как создать гистограмму с ячейками в react js аналогично тому, как в Python.

на языке Python:

 import matplotlib.pyplot as plt
x = [2,5,11,22,66,88]
plt.hist(x, bins =3)
plt.show()

и в результате получается гистограмма по оси x: 3 диапазона значений x(3 в количестве ячеек, которые я отправил). ось y: количество значений из x, которые находятся в каждом диапазоне.
Я добавляю результат гистограммы, полученный в Python.
изображение гистограммы python
Итак, как сделать то же самое в React?
Спасибо!!

Комментарии:

1. Если вы пытаетесь перевести matplotlib на javascript, вместо этого используйте d3.js или аналогичную библиотеку построения графиков. Это не будет «похоже», потому что API-интерфейсы разные

Ответ №1:

Вы можете использовать plotly.js библиотека для этого.

HTML:

 <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.3.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JS:

 const x = [2,5,11,22,66,88]

const trace = {
    x: x,
    type: 'histogram',
    xbins: {
        end: 88, 
        size: (88 - 2) / 3, 
        start: 2  }
  };
Plotly.newPlot('myDiv', [trace]);

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

Метки: