react-native-responsive-linechart
Giới thiệu v5
Thay đổi đột ngột liên quan đến v4:
- Sử dụng thư viện mới
react-native-gesture-handler
Thay đổi đột ngột liên quan đến v3:
- Hỗ trợ trực quan hóa điểm dữ liệu
- Thay đổi tên thành phần gợi ý thư viện từ
BoxTooltipthành chỉTooltip - Thay đổi giao diện nhỏ (đổi từ “box” thành “shape”)
Các tính năng bổ sung:
- Biểu đồ có thể cuộn!
View installation docs & examples here
Hình ảnh màn hình
Ví dụ nhanh
import { Chart, VerticalAxis, HorizontalAxis, Line } from 'react-native-responsive-linechart'
<Chart
style={{ height: 200, width: '100%', backgroundColor: '#eee' }}
xDomain={{ min: -2, max: 10 }}
yDomain={{ min: -2, max: 20 }}
padding={{ left: 20, top: 10, bottom: 10, right: 10 }}
>
<VerticalAxis tickValues={[0, 4, 8, 12, 16, 20]} />
<HorizontalAxis tickCount={3} />
<Line data={data1} smoothing="none" theme={{ stroke: { color: 'red', width: 1 } }} />
<Line data={data2} smoothing="cubic-spline" theme={{ stroke: { color: 'blue', width: 1 } }} />
</Chart>
const data1 = [
{ x: -2, y: 1 },
{ x: -1, y: 0 },
{ x: 8, y: 13 },
{ x: 9, y: 11.5 },
{ x: 10, y: 12 }
]
const data2 = [
{ x: -2, y: 15 },
{ x: -1, y: 10 },
{ x: 0, y: 12 },
{ x: 1, y: 7 },
{ x: 8, y: 12 },
{ x: 9, y: 13.5 },
{ x: 10, y: 18 }
]
[CŨ] Giới thiệu v3
Phiên bản 3 là một sự viết lại hoàn toàn từ đầu với những tính năng thú vị sau đây:
- Hoàn toàn viết bằng Typescript
- Giao diện API có thể ghép nối, mọi phần của biểu đồ đều là thành phần riêng biệt.
- Rất ít phụ thuộc (Kích thước gói tổng cộng chỉ là 62 kilobytes)
- Trang web tài liệu mới với ví dụ mở rộng
- Hỗ trợ biểu đồ đường mịn/linear và biểu đồ diện tích, gợi ý và nhiều tính năng khác
Do tính chất của các thay đổi, phiên bản 2.2 và thấp hơn hiện không được hỗ trợ nữa. Bạn có thể tìm thấy old README here.
Chi tiết tải về:
Tác giả: xanderdeseyn
Nguồn: https://github.com/xanderdeseyn/react-native-responsive-linechart
Giấy phép: MIT license
