react-native-svg-charts-examples - GitLite

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #machine-learning #rust #linux #nodejs #java #windows #cli #kubernetes #awesome-list #open-source

react-native-svg-charts-examples

(★ 368)

A collection of usage examples of react-native-svg-charts

파일 탐색기

최종 버전 다운로드 (.zip)

- App.js
- - BUCK
  - build.gradle
  - proguard-rules.pro
- - BUCK
  - debug.keystore.properties
- build.gradle
- gradle.properties
- gradlew
- gradlew.bat
- settings.gradle
- - index.js
  - meme-1.png
  - meme-2.png
  - meme-3.gif
  - meme-4.jpg
  - meme-5.png
- - AppDelegate.h
  - AppDelegate.m
  - Info.plist
  - main.m
- - Info.plist
- - Info.plist
- - project.pbxproj
- - contents.xcworkspacedata
- - examplesTests.m
  - Info.plist
- Podfile
- Podfile.lock
- area-chart.png
- area-stack-with-y-axis.png
- bar-chart-gradient.png
- bar-chart-grouped.png
- bar-chart-horizontal-with-axis.png
- bar-chart-horizontal-with-labels.png
- bar-chart-horizontal.png
- bar-chart-vertical-with-labels.png
- bar-chart-with-different-bars.png
- bar-chart-with-different-colors.png
- both-axes.png
- custom-grid.png
- decorators.png
- extras.png
- gradient-line.png
- gradient.png
- grid-min-max.png
- interactive-chart.gif
- layered-charts.png
- line-chart.png
- multi-line.png
- partial-chart-area.png
- partial-chart-line.png
- pie-chart-with-dynamic-slices.png
- pie-chart-with-labels.png
- pie-with-centered-labels.png
- pie-with-different-arcs.png
- pie-with-image-labels.png
- progress-gauge.png
- scale-band.png
- scale-time.png
- - both-axes.js
  - custom-grid.js
  - decorator.js
  - extras.js
  - grid-min-max.js
  - index.js
  - layered-charts.js
- index.js
- storybook.js
.gitignore
app.json
index.js
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/JesperLekland/react-native-svg-charts-examples

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-svg-charts-examples

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd android/app

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-svg-charts-examples

This repository is meant to serve as a showcase for [`react-native-svg-charts`](https://github.com/JesperLekland/react-native-svg-charts).
Here we try to gather all the coolest implementations and use cases to serve as inspiration for other people. Open Source is all about sharing knowledge!

Have you ever made a cool graph using `react-native-svg-charts`, maybe a super complex use case or just really pretty design?
Make a PR with your code and include it here for everyone to see.

Have a separate repo with some awesome examples? Make a PR and just include the link to your repo in this README, We'd rather have too many cool examples!

Just make sure that all examples are fully reproducible demos so that people don't have to figure a bunch of stuff out on the own.

Click an example to see the code! 💪

# Examples

* [AreaChart](#areachart)
* [StackedAreaChart](#stackedareachart)
* [Bar](#bar)
* [Line](#linechart)
* [ProgressCircle](#progresscircle)
* [PieChart](#piechart)

## AreaChart
[<img src="./screenshots/area-chart.png" width=33% />](./storybook/stories/area-chart/with-line.js)
[<img src="./screenshots/grid-min-max.png" width=33% />](./storybook/stories/grid-min-max.js)
[<img src="./screenshots/gradient.png" width=33% />](./storybook/stories/area-chart/with-gradient.js)
[<img src="./screenshots/partial-chart-area.png" width=33% />](./storybook/stories/partial-chart/area-chart.js)
[<img src="./screenshots/layered-charts.png" width=33% />](./storybook/stories/layered-charts.js)
[<img src="./screenshots/scale-time.png" width=33% />](./storybook/stories/x-axis/scale-time.js)

## BarChart

[<img src="./screenshots/bar-chart-grouped.png" width=33% />](./storybook/stories/bar-chart/with-multiple-data-sets.js)
[<img src="./screenshots/bar-chart-gradient.png" width=33% />](./storybook/stories/bar-chart/with-gradient.js)
[<img src="./screenshots/bar-chart-with-different-bars.png" width=33% />](./storybook/stories/bar-chart/with-different-bars.js)
[<img src="./screenshots/bar-chart-horizontal.png" width=33% />](./storybook/stories/bar-chart/horizontal.js)
[<img src="./screenshots/bar-chart-horizontal-with-axis.png" width=33% />](./storybook/stories/bar-chart/horizontal-with-axis.js)
[<img src="./screenshots/bar-chart-horizontal-with-labels.png" width=33% />](./storybook/stories/bar-chart/horizontal-with-labels.js)
[<img src="./screenshots/bar-chart-vertical-with-labels.png" width=33% />](./storybook/stories/bar-chart/vertical-with-labels.js)
[<img src="./screenshots/scale-band.png" width=33% />](./storybook/stories/x-axis/scale-band.js)

## LineChart

[<img src="./screenshots/line-chart.png" width=33% />](./storybook/stories/line-chart/with-shadow.js)
[<img src="./screenshots/gradient-line.png" width=33% />](./storybook/stories/line-chart/with-gradient.js)
[<img src="./screenshots/partial-chart-line.png" width=33% />](./storybook/stories/partial-chart/line-chart.js)
[<img src="./screenshots/custom-grid.png" width=33% />](./storybook/stories/custom-grid.js)
[<img src="./screenshots/extras.png" width=33% />](./storybook/stories/extras.js)
[<img src="./screenshots/both-axes.png" width=33% />](./storybook/stories/both-axes.js)
[<img src="./screenshots/decorators.png" width=33% />](./storybook/stories/decorator.js)
[<img src="./screenshots/multi-line.png" width=33% />](./storybook/stories/line-chart/multi-line.js)

## StackedAreaChart

[<img src="./screenshots/area-stack-with-y-axis.png" width=33% />](./storybook/stories/area-stack/with-y-axis.js)

## ProgressCircle

[<img src="./screenshots/progress-gauge.png" width=33% />](./storybook/stories/progress-gauge/index.js)

## PieChart

[<img src="./screenshots/pie-chart-with-labels.png" width=33% />](./storybook/stories/pie-chart/with-labels.js)
[<img src="./screenshots/pie-with-different-arcs.png" width=33% />](./storybook/stories/pie-chart/with-different-arcs.js)
[<img src="./screenshots/pie-with-centered-labels.png" width=33% />](./storybook/stories/pie-chart/with-centered-labels.js)
[<img src="./screenshots/pie-with-image-labels.png" width=33% />](./storybook/stories/pie-chart/with-image-labels.js)
[<img src="./screenshots/pie-chart-with-dynamic-slices.png" width=33% />](./storybook/stories/pie-chart/with-dynamic-slices.js)

## InteractiveChart

[<img src="./screenshots/interactive-chart.gif" width=33% />](./storybook/stories/interactive-chart/index.js)

## License
[MIT](./LICENSE)