97精品视频在线观看,夜夜操夜夜爽,亚洲欧美中文字幕

? ? ? ? 根據(jù)項目需求，需要實現(xiàn)下面的餅狀圖

然后找到了charts_fluttercharts_flutter | Flutter Package這個插件，進來之后可以看到Readme模塊中有一個online gallery

可以看出來是使用這個插件可以實現(xiàn)的各種圖表的樣式，往下拉可以看到在餅狀圖的示例中，正好有上面UI相同的樣式

點進去，就可以看到Example: 的示例代碼

可以看一下PieChart(XXXXX)（XXXXX代表方法中的各種參數(shù)，這里就不提出來了）方法，示例中給出了3個參數(shù)，分別為seriesList、animate、defaultRenderer。

????????先看seriesList，可以看到是Series的一個集合，而Series在示例代碼中也看到它的實現(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是可以自己定義的一個String類型的字段，domainFn和measureFn可以認為是一個坐標中的坐標系（在柱狀圖和折線圖中會比較好理解一點），在示例中分別取值為自定義的對象LinearSales 的year、sales兩個字段，data是LinearSales的集合（需要展示的數(shù)據(jù)的集合）。labelAccessorFn這個參數(shù)就是指的“備注”，在示例代碼中賦值為'${row.year}: ${row.sales}'，在視圖中展示為下圖，那么是不是也可以在LinearSales中賦值一個參數(shù)來設置這個“備注”？

? ? 再看animate方法，是一個bool類型的值，是否需要動畫。

? ? 最后看defaultRenderer，它是一個ArcRendererConfig，示例代碼中給了兩個參數(shù)arcWidth、arcRendererDecorators。arcWidth這個好理解，就是這個餅圖的寬度（這個寬度可以理解為是畫出來的餅圖的線的寬度），arcRendererDecorators是Series中l(wèi)abelAccessorFn在餅狀圖中的顯示樣式。

? ? ? ?那么問題來了，要實現(xiàn)我們需求要求的樣式的話，需要修改這個餅狀圖的顏色，示例代碼中并沒有給出來，那么就得自己研究了。那么留兩個疑問：餅狀圖不同區(qū)域的不同顏色；展示備注的樣式修改。

? ? ? 1、給餅狀圖設置想要的顏色：

? ? ? ? 我們在這個插件的瀏覽器頁面中返回上一頁（多種不同樣式圖表展示的頁面），可以看到有多個顏色的圖表，點進去，或者在代碼中點擊進入Series的源碼中，都看到了一個colorFn的字段，和設置domainFn和measureFn字段類似，那么我們是不是可以在LinearSales中新賦值一個顏色的參數(shù)，來對Series進行設置。

? ? ? ? 2、設置備注“l(fā)abelAccessorFn”的展示樣式

? ? ? ? 在上面的文章中也提到了，arcRendererDecorators參數(shù)賦值的是一個ArcLabelDecorator，這個ArcLabelDecorator就是來做這個“備注”的展示樣式的，我們點進去這個方法

看到了一些默認的參數(shù)，labelPosition是一個ArcLabelPosition，而根據(jù)它定義的值來說

我們可以得知它是用來區(qū)分這個“備注”在餅狀圖中的位置。

? ? ? ? 而TextStyleSpec參數(shù)呢，通過它的代碼，是不是就可以知道這個就是用來設置“備注”的樣式的方法

那么現(xiàn)在，用代碼（demo）來確定是不是可以通過上述的方法實現(xiàn)需求想要的結果

? ? 1、首先，創(chuàng)建一個需要展示的數(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 出來一個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),

? ? ? ? )

????]),

);