前言：
各位同學(xué)大家好坡贺，有段時(shí)間沒有給大家更新文章了哈摩幔，最近看了下flutter里面chart的用法 做了一些統(tǒng)計(jì)表和折線圖的效果 這些想象大家都不陌生 上學(xué)的時(shí)候經(jīng)常被老師要求畫這個(gè) 今天就分享flutter里面如何實(shí)現(xiàn)的，那么廢話不多說我們正式開始
準(zhǔn)備工作：
需要安裝flutter的開發(fā)環(huán)境：大家可以去看看之前的教程：
1 win系統(tǒng)flutter開發(fā)環(huán)境安裝教程: http://www.reibang.com/p/152447bc8718
2 mac系統(tǒng)flutter開發(fā)環(huán)境安裝教程：http://www.reibang.com/p/bad2c35b41e3
效果圖：
需要用到的三方庫：
# 圖表 （沒有圖例） https://pub.flutter-io.cn/packages/charts_flutter#-installing-tab-
charts_flutter: ^0.9.0
# 圖表（沒有提示欄) https://pub.flutter-io.cn/packages/mp_chart
mp_chart: ^0.2.2 #latest version
# 列表懸浮頭 https://pub.flutter-io.cn/packages/sticky_headers
sticky_headers: ^0.1.8+1
# EChart 圖表（縮放手勢(shì)沖突） https://pub.flutter-io.cn/packages/flutter_echarts
flutter_echarts: ^1.3.5
請(qǐng)?jiān)趐ubspec.yaml 文件中添加依賴 并在中端輸入flutter pub get 命令下載依賴
具體實(shí)現(xiàn)：
普通的統(tǒng)計(jì)圖和折線圖：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('chart'),
),
body: Container(
child: ListView(
children: <Widget>[
Container(
height: 300,
child: getBar(),
),
Container(
height: 300,
child: getLine(),
)
],
),
),
);
}
主要布局我們寫了一個(gè) ListView布局來裝在我們現(xiàn)實(shí)的部分 上面的攻擊圖 因?yàn)槲覀兣鲁銎聊桓叨痊F(xiàn)實(shí)不全所以用了listivew 當(dāng)然你也可以用 Column線性布局 嵌套SingleChildScrollView在外部也是OK這個(gè)就不細(xì)講告丢，
class Barsales {
String day;
int sale;
Barsales(this.day, this.sale);
}
class Linesales {
DateTime time;
int sale;
Linesales(this.time, this.sale);
}
我們定義2個(gè)model類來處理數(shù)據(jù)的獲取
Widget getBar() {
List<Barsales> dataBar = [
new Barsales("1", 20),
new Barsales("2", 50),
new Barsales("3", 20),
new Barsales("4", 80),
new Barsales("5", 120),
new Barsales("6", 30),
];
var seriesBar = [
charts.Series(
data: dataBar,
domainFn: (Barsales sales, _) => sales.day,
measureFn: (Barsales sales, _) => sales.sale,
id: "Sales",
)
];
return charts.BarChart(seriesBar);
}
我們定義dataBar數(shù)組并且在里面添加6條數(shù)據(jù) 卫旱。然后將數(shù)據(jù)的數(shù)據(jù)源賦值給我們的Series 構(gòu)造方法里面data 屬性里面
var seriesBar = [
charts.Series(
data: dataBar,
domainFn: (Barsales sales, _) => sales.day,
measureFn: (Barsales sales, _) => sales.sale,
id: "Sales",
)
];
然后我們將seriesBar 傳給我們 BarChart 方法
return charts.BarChart(seriesBar);
折線圖效果實(shí)現(xiàn):
Widget getLine() {
List<Linesales> dataLine = [
new Linesales(new DateTime(2019, 7, 2), 33),
new Linesales(new DateTime(2019, 7, 3), 55),
new Linesales(new DateTime(2019, 7, 4), 22),
new Linesales(new DateTime(2019, 7, 5), 88),
new Linesales(new DateTime(2019, 7, 6), 123),
new Linesales(new DateTime(2019, 7, 7), 75),
];
var seriesLine = [
charts.Series<Linesales, DateTime>(
data: dataLine,
domainFn: (Linesales lines, _) => lines.time,
measureFn: (Linesales lines, _) => lines.sale,
id: "Lines",
)
];
//是TimeSeriesChart，而不是LineChart,因?yàn)閤軸是DataTime類
Widget line = charts.TimeSeriesChart(seriesLine);
//line = charts.LineChart(series);
return line;
}
跟統(tǒng)計(jì)圖類似
List<Linesales> dataLine = [
new Linesales(new DateTime(2019, 7, 2), 33),
new Linesales(new DateTime(2019, 7, 3), 55),
new Linesales(new DateTime(2019, 7, 4), 22),
new Linesales(new DateTime(2019, 7, 5), 88),
new Linesales(new DateTime(2019, 7, 6), 123),
new Linesales(new DateTime(2019, 7, 7), 75),
];
我們傳入time和 sale 實(shí)力化Linesales添加到 dataLine 數(shù)組中
var seriesLine = [
charts.Series<Linesales, DateTime>(
data: dataLine,
domainFn: (Linesales lines, _) => lines.time,
measureFn: (Linesales lines, _) => lines.sale,
id: "Lines",
)
];
我們定義dataLine數(shù)組并且在里面添加6條數(shù)據(jù) 坐昙。然后將數(shù)據(jù)的數(shù)據(jù)源賦值給我們的Series 構(gòu)造方法里面data 屬性里面
//是TimeSeriesChart，而不是LineChart,因?yàn)閤軸是DataTime類
Widget line = charts.TimeSeriesChart(seriesLine);
//line = charts.LineChart(series);
return line;
然后我們調(diào)用 charts.TimeSeriesChart 講 seriesLine 傳入 返回一個(gè)line 即可 這邊要注意要TimeSeriesChart迹蛤，而不是LineChart,因?yàn)閤軸是DataTime類 到此我們統(tǒng)計(jì)圖和折線圖就講完了民珍，還有其他效果圖的實(shí)現(xiàn) 大家可以去看具體完整源碼實(shí)現(xiàn)
最后總結(jié)：
flutter 里面chart 圖表的基本用法就講完了 主要是三方庫api的調(diào)用要注意 實(shí)現(xiàn)起來還算簡單，庫本身幫我們都封裝好我們只需要傳入數(shù)據(jù)源即可盗飒。使用這些三方庫還可以實(shí)現(xiàn)跟多酷炫圖表效果，（當(dāng)然你也可以自己繪制就比較麻煩 需要時(shí)間研究 我這邊就不展開講了）陋桂， 最后希望我的文章能幫助到各位解決問題 逆趣，以后我還會(huì)貢獻(xiàn)更多有用的代碼分享給大家。各位同學(xué)如果覺得文章還不錯(cuò) 嗜历，麻煩給關(guān)注和star宣渗，小弟在這里謝過啦
