? ? ? ? 根據(jù)項(xiàng)目需求蝇更，需要實(shí)現(xiàn)下面的餅狀圖
然后找到了charts_fluttercharts_flutter | Flutter Package這個(gè)插件蛤克，進(jìn)來之后可以看到Readme模塊中有一個(gè)online gallery
可以看出來是使用這個(gè)插件可以實(shí)現(xiàn)的各種圖表的樣式股耽，往下拉可以看到在餅狀圖的示例中碌奉，正好有上面UI相同的樣式
點(diǎn)進(jìn)去秉馏，就可以看到Example: 的示例代碼
可以看一下PieChart(XXXXX)（XXXXX代表方法中的各種參數(shù)堤框，這里就不提出來了）方法栖榨，示例中給出了3個(gè)參數(shù)自沧，分別為seriesList坟奥、animate树瞭、defaultRenderer。
????????先看seriesList爱谁，可以看到是Series的一個(gè)集合晒喷，而Series在示例代碼中也看到它的實(shí)現(xiàn)方法。
Series<LinearSales, int>(
? ? ? ? id: 'Sales',
? ? ? ? domainFn: (LinearSales sales, _) => sales.year,
? ? ? ? measureFn: (LinearSales sales, _) => sales.sales,
? ? ? ? data: data,
? ? ? ? // Set a label accessor to control the text of the arc label.
? ? ? ? labelAccessorFn: (LinearSales row, _) => '${row.year}: ${row.sales}',
? ? ? )
LinearSales是自定義的Object
class LinearSales {
? final int year;
? final int sales;
? LinearSales(this.year, this.sales);
}
方法中的id是可以自己定義的一個(gè)String類型的字段访敌，domainFn和measureFn可以認(rèn)為是一個(gè)坐標(biāo)中的坐標(biāo)系（在柱狀圖和折線圖中會(huì)比較好理解一點(diǎn)）凉敲，在示例中分別取值為自定義的對(duì)象LinearSales 的year、sales兩個(gè)字段寺旺，data是LinearSales的集合（需要展示的數(shù)據(jù)的集合）爷抓。labelAccessorFn這個(gè)參數(shù)就是指的“備注”，在示例代碼中賦值為'${row.year}: ${row.sales}'阻塑，在視圖中展示為下圖蓝撇，那么是不是也可以在LinearSales中賦值一個(gè)參數(shù)來設(shè)置這個(gè)“備注”？
? ? 再看animate方法叮姑，是一個(gè)bool類型的值唉地，是否需要?jiǎng)赢嫛?/p>
? ? 最后看defaultRenderer，它是一個(gè)ArcRendererConfig传透，示例代碼中給了兩個(gè)參數(shù)arcWidth耘沼、arcRendererDecorators。arcWidth這個(gè)好理解朱盐，就是這個(gè)餅圖的寬度（這個(gè)寬度可以理解為是畫出來的餅圖的線的寬度）群嗤，arcRendererDecorators是Series中l(wèi)abelAccessorFn在餅狀圖中的顯示樣式。
? ? ? ?那么問題來了兵琳，要實(shí)現(xiàn)我們需求要求的樣式的話狂秘，需要修改這個(gè)餅狀圖的顏色，示例代碼中并沒有給出來躯肌，那么就得自己研究了者春。那么留兩個(gè)疑問：餅狀圖不同區(qū)域的不同顏色；展示備注的樣式修改清女。
? ? ? 1钱烟、給餅狀圖設(shè)置想要的顏色：
? ? ? ? 我們在這個(gè)插件的瀏覽器頁面中返回上一頁（多種不同樣式圖表展示的頁面），可以看到有多個(gè)顏色的圖表嫡丙，點(diǎn)進(jìn)去拴袭，或者在代碼中點(diǎn)擊進(jìn)入Series的源碼中，都看到了一個(gè)colorFn的字段曙博，和設(shè)置domainFn和measureFn字段類似拥刻，那么我們是不是可以在LinearSales中新賦值一個(gè)顏色的參數(shù)，來對(duì)Series進(jìn)行設(shè)置父泳。
? ? ? ? 2般哼、設(shè)置備注“l(fā)abelAccessorFn”的展示樣式
? ? ? ? 在上面的文章中也提到了吴汪，arcRendererDecorators參數(shù)賦值的是一個(gè)ArcLabelDecorator，這個(gè)ArcLabelDecorator就是來做這個(gè)“備注”的展示樣式的蒸眠，我們點(diǎn)進(jìn)去這個(gè)方法
看到了一些默認(rèn)的參數(shù)浇坐，labelPosition是一個(gè)ArcLabelPosition，而根據(jù)它定義的值來說
我們可以得知它是用來區(qū)分這個(gè)“備注”在餅狀圖中的位置黔宛。
? ? ? ? 而TextStyleSpec參數(shù)呢，通過它的代碼擒贸，是不是就可以知道這個(gè)就是用來設(shè)置“備注”的樣式的方法
那么現(xiàn)在臀晃，用代碼（demo）來確定是不是可以通過上述的方法實(shí)現(xiàn)需求想要的結(jié)果
? ? 1、首先介劫，創(chuàng)建一個(gè)需要展示的數(shù)據(jù)的PieSales?（示例代碼中的LinearSales）徽惋，我們把顏色和自定義的“備注”字段都加上
import 'package:charts_flutter/flutter.dart' as charts;
class PieSales {
? ? ?final intstatus;
? ? ?final StringstatusInfo;
? ????final intsales;
? ????final charts.Colorcolor;
? ????PieSales(this.status, this.sales, this.color, this.statusInfo);
}
????????2、然后座韵，生成PieSales 的集合data
var data = [
????PieSales(0,20,charts.ColorUtil.fromDartColor(Color(0xFF48BFFE)), "Zero",),
? ? PieSales(1,20,charts.ColorUtil.fromDartColor(Color(0xFF38D28D)),"One",),
? ? PieSales(2,20,charts.ColorUtil.fromDartColor(Color(0xFFF2CE28)), "Two", ),
? ? PieSales(3,20,charts.ColorUtil.fromDartColor(Color(0xFFFFA65B)), "Three",),
? ? PieSales(4,20, charts.ColorUtil.fromDartColor(Color(0xFFE5574D)), "Four",),
? ? PieSales(5, 20,charts.ColorUtil.fromDartColor(Color(0xFFDADADA)), "Five",),
];
? ? ? ? 3险绘、再然后，生成Series的集合seriesList
var seriesList = [
????charts.Series(
????????id:'Sales',
? ? ????domainFn: (PieSales sales, _) => sales.status,
? ? ????measureFn: (PieSales sales, _) => sales.sales,
? ? ????colorFn: (PieSales sales, _) => sales.color,
? ? ????data: data,
? ????? labelAccessorFn: (PieSales row, _) => row.statusInfo,
? ?)
];
? ? ? ? 4誉碴、最后宦棺，return 出來一個(gè)PieChart
return charts.PieChart(
????seriesList,
? animate:true,
? defaultRenderer:new charts.ArcRendererConfig(
????????arcWidth: (ScreenUtil().scaleWidth *40).toInt(),
? ? ? ????arcRendererDecorators: [
????????????????charts.ArcLabelDecorator(
????????????????????labelPosition: charts.ArcLabelPosition.inside,
? ? ? ? ? ? ? ? insideLabelStyleSpec:
????????????????????charts.TextStyleSpec(fontSize:8, color: charts.Color.white),
? ? ? ? )
????]),
);
效果圖，如下圖
我們修改labelPosition和insideLabelStyleSpec兩個(gè)參數(shù)黔帕，看下效果
labelPosition: charts.ArcLabelPosition.auto,
insideLabelStyleSpec:charts.TextStyleSpec(fontSize:12, color: charts.Color.black),
效果如下
我們把其中一個(gè)“Four”修改為“FourFourFourFourFourFour”代咸，展示如下圖：
再修改labelPosition
labelPosition: charts.ArcLabelPosition.outside,
如圖
至此，這個(gè)空心餅狀圖是不是就完成了成黄。
