跟我學flutter:Flutter雷達圖表(一)如何使用kg_charts

語言: CN / TW / HK

一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第2天,點選檢視活動詳情

前言

本節主要講如何使用kg_charts中的雷達圖表,來繪製一個雷達圖,下一章節則會對如何繪製一個可點選雷達圖表進行詳細說明。 最近我在開發有關雷達圖表的的業務,但的確在線上找不到可以快速整合的雷達圖表,找到一篇文章(Flutter雷達圖package)但不是很好定製化我們的業務,但其中的程式碼有比較好的借鑑。然後我借鑑了部分程式碼,進行了kg_charts的開發。

整合方式

dart dependencies: kg_charts: ^0.0.1

原始碼地址:https://github.com/smartbackme/kg_charts

展示效果

1、圓形雷達圖表

在這裡插入圖片描述

2、方形雷達圖表

在這裡插入圖片描述

3、方形可點選雷達圖表(點選效果為氣泡)

在這裡插入圖片描述

4、方形多繪製區域圖表(自定義展示文字)

在這裡插入圖片描述

4、方形多繪製區域圖表(無自定義展示文字)

在這裡插入圖片描述

引數說明

| 引數 | 型別 | 是否必要 | 說明 |--|--|--|--| | radarMap| RadarMapModel| 是| 包含 圖例,雷達點,雷達資料,半徑 ,雷達種類(圓形,方形),文字最大寬度,內部畫幾條線(LineModel中包含繪製線顏色,文字大小等) | | textStyle | style | 否 | 外部繪製文字顏色與大小 | |isNeedDrawLegend | bool | 否 | 預設為true | | lineText | fun | 否 | 內部線上畫的文字,根據資料動態生成,如果為空則不展示 | |dilogText | fun | 否 | 點擊出現的dialog,根據資料動態生成,如果為空則不展示 | | outLineText | fun | 否 | 外部線上畫的文字,根據資料動態生成,如果為空則不展示 |

詳細使用說明

圖片說明 在這裡插入圖片描述

程式碼使用說明

1、圖例

bash legend: [ LegendModel('10/10',const Color(0XFF0EBD8D)), LegendModel('10/11',const Color(0XFFEAA035)), ]

2、維度資料 如上程式碼所示,假設目前有兩個日期維度,(業務假設是兩天的考試)制定兩個維度。

bash data: [ MapDataModel([100,90,90,90,10,20]), MapDataModel([90,90,90,90,10,20]), ], 兩個維度需要配置兩套資料

維度和資料必須對應,兩個維度必須是兩套資料

3、資料組

bash indicator: [ IndicatorModel("English",100), IndicatorModel("Physics",100), IndicatorModel("Chemistry",100), IndicatorModel("Biology",100), IndicatorModel("Politics",100), IndicatorModel("History",100), ]

資料的長短必須與資料的引數一致,比如說是六個科目,那麼每套資料必須是6個數據,這個資料設定一個最大資料值,而且資料組中的值不能比該資料大。

4、RadarMapModel中其他基本引數

bash radius: 130, shape: Shape.square, maxWidth: 70, line: LineModel(4), radius 半徑 shape 圓形的圖還是方形的圖 maxWidth 展示外環文字最大寬度 line 內環有幾個環(還可配置內環文字大小和顏色)

5、其他基本配置

bash textStyle: const TextStyle(color: Colors.black,fontSize: 14), isNeedDrawLegend: true, lineText: (p,length) => "${(p*100~/length)}%", dilogText: (IndicatorModel indicatorModel,List<LegendModel> legendModels,List<double> mapDataModels) { StringBuffer text = StringBuffer(""); for(int i=0;i<mapDataModels.length;i++){ text.write("${legendModels[i].name} : ${mapDataModels[i].toString()}"); if(i!=mapDataModels.length-1){ text.write("\n"); } } return text.toString(); }, outLineText: (data,max)=> "${data*100~/max}%", textStyle : 外環文字顏色,大小 isNeedDrawLegend:是否需要圖例 lineText : 線上標註的文字(動態) 如上程式碼所示是轉換為% dilogText:點選後彈出的浮動框(動態) 如上程式碼所示把日期都輸出 outLineText:區域外環是否展示文字(動態) 如上程式碼所示是轉換為%

整體程式碼展示

bash RadarWidget( radarMap: RadarMapModel( legend: [ LegendModel('10/10',const Color(0XFF0EBD8D)), LegendModel('10/11',const Color(0XFFEAA035)), ], indicator: [ IndicatorModel("English",100), IndicatorModel("Physics",100), IndicatorModel("Chemistry",100), IndicatorModel("Biology",100), IndicatorModel("Politics",100), IndicatorModel("History",100), ], data: [ // MapDataModel([48,32.04,1.00,94.5,19,60,50,30,19,60,50]), // MapDataModel([42.59,34.04,1.10,68,99,30,19,60,50,19,30]), MapDataModel([100,90,90,90,10,20]), MapDataModel([90,90,90,90,10,20]), ], radius: 130, duration: 2000, shape: Shape.square, maxWidth: 70, line: LineModel(4), ), textStyle: const TextStyle(color: Colors.black,fontSize: 14), isNeedDrawLegend: true, lineText: (p,length) => "${(p*100~/length)}%", dilogText: (IndicatorModel indicatorModel,List<LegendModel> legendModels,List<double> mapDataModels) { StringBuffer text = StringBuffer(""); for(int i=0;i<mapDataModels.length;i++){ text.write("${legendModels[i].name} : ${mapDataModels[i].toString()}"); if(i!=mapDataModels.length-1){ text.write("\n"); } } return text.toString(); }, outLineText: (data,max)=> "${data*100~/max}%", ),