Ось кілька прикладів бібліотек діаграм React із відповідними функціями та прикладами:
1. React Chartjs 2
- Функції: різні типи діаграм, наприклад лінійні, стовпчасті, кругові тощо.- Приклади:
- Вертикальна гістограма
- Горизонтальна гістограма
- Гістограма з накопиченням
- Згрупована гістограма
- Діаграма площ
- Лінійна діаграма
- Багатоосьова лінійна діаграма
- Секторна діаграма
- Кольцева діаграма
- Карта полярної області
- Радарна діаграма
- Точкова діаграма
- Бульбашкова діаграма
- Багатотипова діаграма
- Діаграми подій
- Діаграма Ref
- Градієнтна діаграма
2. React Google Charts
- Функції: різні типи діаграм, як-от області, стовпчики, бульбашки тощо.- Приклади:
- Діаграма площ
- Стовпчаста діаграма
- Бульбашкова діаграма
- Календар
- Candlestick Chart
- Стовпчаста діаграма
- Комбінована діаграма
- Гант
- Датчик
- Географічна діаграма
- Гістограма
- Лінійна діаграма
- Організаційна схема
- Секторна діаграма
- Санкі
- Точкова діаграма
- Східчаста діаграма
- Стіл
- Хронологія
- Карта дерева
- Дерево слів
- Анімації
- Редактор діаграм
- Елементи керування
- Взаємодії
- Макет
- Електронна таблиця
- Панель інструментів
3. ApexCharts.js
- Функції: різні типи діаграм, наприклад лінійні, стовпчасті, стовпчасті, секторні тощо.- Приклади: містить вихідний код для всіх прикладів, щоб заощадити час розробки.
4. CanvasJS
- Функції: інтерактивні, адаптивні діаграми з анімацією, масштабуванням, панорамуванням, подіями, експортом, деталізацією та оновленнями в реальному часі.- Приклади:
- Лінійні діаграми
- Сплайнові та крокові лінійні діаграми
- Діаграми площ
- Площа сплайну, площа накопичення, область накопичення 100, площа кроку, область діапазону та діаграма сплайн-площі діапазону
- Стовпчасті діаграми
- Стовпчасті діаграми
- Стовпець із накопиченням, стовпець із накопиченням 100%, стовпець із діапазоном, стовпець із накопиченням, стовпчик з накопиченням 100%, стовпець із діапазоном та водоспадні діаграми
- Кругові діаграми
- Donut / Donut Charts
- Воронкові та пірамідні діаграми
- Графіки свічок і OHLC
- Точкові та бульбашкові діаграми
- Діаграми коробок і вусів
- Помилка та лінійні діаграми помилок
- Динамічні діаграми
- Біржові діаграми з вибором діапазону, навігатором і кількома діаграмами
5. TanStack/react-charts
- Функції: різні типи діаграм, наприклад лінійні, стовпчасті, бульбашкові тощо.- Приклади: містить приклади простих, лінійних, смужкових, бульбашок, областей, користувацьких стилів, користувацьких підказок, параметрів осі, темного режиму, блискучого, пензля, режимів групування, параметрів підказок тощо.
Ці бібліотеки надають великі приклади та шаблони, які допоможуть вам розпочати створення діаграм у вашому додатку React. Ви можете вибрати той, який найкраще відповідає вашим потребам, залежно від типів діаграм, які ви хочете створити, і рівня налаштування, який вам потрібен[1][2][3][4][5].
цитати:[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts