Add Installation and Getting Started guides
This commit is contained in:
parent
6020e8a452
commit
e00af83d8b
75
README.md
75
README.md
@ -1,9 +1,76 @@
|
|||||||
# flutter_circular_chart
|
# Flutter Circular Chart
|
||||||
|
|
||||||
Animated radial and pie charts for Flutter
|
A library for creating animated circular chart widgets with Flutter, inspired by [Zero to One with Flutter](https://medium.com/dartlang/zero-to-one-with-flutter-43b13fd7b354).
|
||||||
|
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
__Note:__ This is a WIP early implementation, use at your own risk. You can install it by including this git repository in your package dependencies:
|
||||||
|
|
||||||
|
```
|
||||||
|
dependencies:
|
||||||
|
flutter_circular_chart:
|
||||||
|
git:
|
||||||
|
url: git://github.com/xqwzts/flutter_circular_chart.git
|
||||||
|
```
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
For help getting started with Flutter, view our online [documentation](http://flutter.io/).
|
Import the package:
|
||||||
|
|
||||||
|
```
|
||||||
|
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
|
||||||
|
```
|
||||||
|
|
||||||
|
Create chart data entry objects:
|
||||||
|
|
||||||
|
```
|
||||||
|
List<CircularStackEntry> data = <CircularStackEntry>[
|
||||||
|
new CircularStackEntry(
|
||||||
|
<CircularSegmentEntry>[
|
||||||
|
new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
|
||||||
|
new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
|
||||||
|
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
|
||||||
|
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
|
||||||
|
],
|
||||||
|
rankKey: 'Quarterly Profits',
|
||||||
|
),
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
Create an `AnimatedCircularChart`:
|
||||||
|
|
||||||
|
```
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return new AnimatedCircularChart(
|
||||||
|
key: _chartKey,
|
||||||
|
size: const Size(300, 300),
|
||||||
|
initialChartData: data,
|
||||||
|
chartType: CircularChartType.Pie,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Call `updateData` to animate the chart:
|
||||||
|
|
||||||
|
```
|
||||||
|
void _cycleSamples() {
|
||||||
|
List<CircularStackEntry> nextData = <CircularStackEntry>[
|
||||||
|
new CircularStackEntry(
|
||||||
|
<CircularSegmentEntry>[
|
||||||
|
new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
|
||||||
|
new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
|
||||||
|
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
|
||||||
|
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
|
||||||
|
],
|
||||||
|
rankKey: 'Quarterly Profits',
|
||||||
|
),
|
||||||
|
];
|
||||||
|
setState(() {
|
||||||
|
_chartKey.currentState.updateData(nextData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
For help on editing package code, view the [documentation](https://flutter.io/developing-packages/).
|
|
||||||
|
Loading…
Reference in New Issue
Block a user