Update readme
This commit is contained in:
parent
e8e01d11b3
commit
6d1dcb1722
93
README.md
93
README.md
@ -8,15 +8,17 @@ A library for creating animated circular chart widgets with Flutter, inspired by
|
|||||||
|
|
||||||
Create easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between.
|
Create easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between.
|
||||||
|
|
||||||
|
![animated_random_radial_chart](screenshots/animated_random_radial_chart_example.gif)
|
||||||
|
|
||||||
![animated pie chart](screenshots/animated_pie_chart_example.gif)
|
![animated pie chart](screenshots/animated_pie_chart_example.gif)
|
||||||
![animated radial chart](screenshots/animated_radial_chart_example_label.gif)
|
![animated radial chart](screenshots/animated_radial_chart_example_label.gif)
|
||||||
![animated_random_radial_chart](screenshots/animated_random_radial_chart_example.gif)
|
|
||||||
|
|
||||||
Check the examples folder for the source code for the above screenshots.
|
Check the examples folder for the source code for the above screenshots.
|
||||||
|
|
||||||
## Contents:
|
## Contents:
|
||||||
- [Installation](#installation)
|
- [Installation](#installation)
|
||||||
- [Getting Started](#getting-started)
|
- [Getting Started](#getting-started)
|
||||||
|
- [Customization](#customization)
|
||||||
- [Details](#details)
|
- [Details](#details)
|
||||||
- [Chart data entries](#chart-data-entries)
|
- [Chart data entries](#chart-data-entries)
|
||||||
|
|
||||||
@ -89,6 +91,95 @@ void _cycleSamples() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
### Hole Label:
|
||||||
|
|
||||||
|
| Property | Default |
|
||||||
|
|------------|:---------------------------------:|
|
||||||
|
| holeLabel | null |
|
||||||
|
| labelStyle | Theme.of(context).textTheme.body2 |
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```dart
|
||||||
|
new AnimatedCircularChart(
|
||||||
|
key: _chartKey,
|
||||||
|
size: _chartSize,
|
||||||
|
initialChartData: <CircularStackEntry>[
|
||||||
|
new CircularStackEntry(
|
||||||
|
<CircularSegmentEntry>[
|
||||||
|
new CircularSegmentEntry(
|
||||||
|
33.33,
|
||||||
|
Colors.blue[400],
|
||||||
|
rankKey: 'completed',
|
||||||
|
),
|
||||||
|
new CircularSegmentEntry(
|
||||||
|
66.67,
|
||||||
|
Colors.blueGrey[600],
|
||||||
|
rankKey: 'remaining',
|
||||||
|
),
|
||||||
|
],
|
||||||
|
rankKey: 'progress',
|
||||||
|
),
|
||||||
|
],
|
||||||
|
chartType: CircularChartType.Radial,
|
||||||
|
percentageValues: true,
|
||||||
|
holeLabel: '1/3',
|
||||||
|
labelStyle: new TextStyle(
|
||||||
|
color: Colors.blueGrey[600],
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 24.0
|
||||||
|
),
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
![hole label example screenshot](screenshots/hole_label_example.png)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Segment Edge Style:
|
||||||
|
|
||||||
|
| Property | Default |
|
||||||
|
|------------|:---------------------:|
|
||||||
|
| edgeStyle | SegmentEdgeStyle.flat |
|
||||||
|
|
||||||
|
| SegmentEdgeStyle | Description |
|
||||||
|
|:----------------:|--------------------------------------------|
|
||||||
|
| flat (default) | Segments begin and end with a flat edge. |
|
||||||
|
| round | Segments begin and end with a semi-circle. |
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```dart
|
||||||
|
new AnimatedCircularChart(
|
||||||
|
key: _chartKey,
|
||||||
|
size: _chartSize,
|
||||||
|
initialChartData: <CircularStackEntry>[
|
||||||
|
new CircularStackEntry(
|
||||||
|
<CircularSegmentEntry>[
|
||||||
|
new CircularSegmentEntry(
|
||||||
|
33.33,
|
||||||
|
Colors.blue[400],
|
||||||
|
rankKey: 'completed',
|
||||||
|
),
|
||||||
|
new CircularSegmentEntry(
|
||||||
|
66.67,
|
||||||
|
Colors.blueGrey[600],
|
||||||
|
rankKey: 'remaining',
|
||||||
|
),
|
||||||
|
],
|
||||||
|
rankKey: 'progress',
|
||||||
|
),
|
||||||
|
],
|
||||||
|
chartType: CircularChartType.Radial,
|
||||||
|
edgeStyle: SegmentEdgeStyle.round,
|
||||||
|
percentageValues: true,
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
![round segment edge example screenshot](screenshots/segment_edge_round_example.png)
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
### Chart data entries:
|
### Chart data entries:
|
||||||
|
Loading…
Reference in New Issue
Block a user