flutter实用系列（四）之charts_flutter图表插件超简单实践

先上图

引入插件

在pubspec.yaml中引入charts_flutter插件

使用的时候版本到0.6.0，插件地址：https://github.com/google/charts

使用插件


import 'package:flutter/material.dart';
引入插件
import 'package:charts_flutter/flutter.dart' as charts;
class Test extends StatefulWidget{
_TestState createState() => _TestState();
}
class _TestState extends State {
String _year;
int _sales;
//点击柱状图触发的函数
_onSelectionChanged(charts.SelectionModel model) {
final selectedDatum = model.selectedDatum;
print(selectedDatum.first.datum.year);
print(selectedDatum.first.datum.sales);
print(selectedDatum.first.series.displayName);
setState(() {
//改变两个显示的数值
_year = selectedDatum.first.datum.year;
_sales = selectedDatum.first.datum.sales;
});
} @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("图表"),
centerTitle: true,
),
body:Container(
child: Column(
children: [
Row(
children: [
Expanded(
child: Container(
alignment: Alignment.center,
child: Text("年份：${_year}"),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Text("数值：${_sales}"),
),
)
],
),
Container(
width: double.infinity,
height: 200.0,
child: charts.BarChart(
//通过下面获取数据传入
ChartFlutterBean.createSampleData(),
//配置项，以及设置触发的函数
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: _onSelectionChanged,
)
],
),
),
],
),
)
);
}
}
//一下为组合柱状图数据部分
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
class ChartFlutterBean {
static List> createSampleData() {
final data = [
new OrdinalSales('2014', 5),
new OrdinalSales('2015', 25),
new OrdinalSales('2016', 100),
new OrdinalSales('2017', 75),
];
return [
new charts.Series(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
}