Всем привет, сегодня я хочу поделиться, как сделать диаграмму с помощью react-native.

  1. Сначала вам нужно создать проект react-native-init ChartProject
  2. Убедитесь, что ваши приложения работают react-native run-android (Android) или react-native run-ios (iOS)
  3. Затем установите диаграмму npm, в данном случае я использую response-native-charts-wrapper npm install --save react-native-charts-wrapper, не забудьте связать эту react-native link react-native-charts-wrapper
  4. После установки response-native-charts-wrapper

для Android: откройте Android Studio, добавьте код в android / build.gradle maven { url: “https://jitpack.io"

для iOS: откройте Терминал, перейдите в каталог, содержащий ChartProject. Затем введите следующую команду pod init. Затем отредактируйте свой Podfile с помощью этой команды open -e Podfile и добавьте этот код

Сохраните отредактированный подфайл, затем запустите команду pod install и дождитесь ее завершения. После этого откройте RNChart - ›ios -› RNChart.xcworkspace, он будет открыт Xcode.

Перетащите ReactNativeCharts в RNCharts.xcworkspace, затем выберите Создать группы.

Создайте заголовок briding Objective C, дайте ему имя RNChart-Briding-Header.h

Отредактируйте свой RNChart-Briding-Header.h

Добавьте свой RNChart-Bridging-Header.h в Настройки сборки - ›Общий компилятор Swift

Проверьте Этапы сборки- ›Источник компиляции, добавьте все файлы .m и .swift из ReactNativeCharts

5. Хорошо, приступим к кодированию. У меня есть данные из службы с json, и я записываю их в свой код, вот

6 . Круговая диаграмма. Это код для создания круговой диаграммы.

7 . Гистограмма. это код для создания гистограммы с несколькими условными обозначениями.

8. Линейная диаграмма. Это код для создания линейной диаграммы.

9. Результат для круговой диаграммы, гистограммы и линейной диаграммы.

Вы можете проверить полный код здесь. Спасибо