跟我學flutter：Flutter雷達圖表（一）如何使用kg_charts

前言

本節主要講如何使用kg_charts中的雷達圖表，來繪制一個雷達圖，下一章節則會對如何繪制一個可點選雷達圖表進行詳細說明。

最近我在開發有關雷達圖表的的業務，但的确線上上找不到可以快速內建的雷達圖表，找到一篇文章（​​Flutter雷達圖package​​）但不是很好定制化我們的業務，但其中的代碼有比較好的借鑒。然後我借鑒了部分代碼，進行了kg_charts的開發。

內建方式

dependencies:
  kg_charts: ^0.0.1      

源碼位址：​​github.com/smartbackme…​​

展示效果

1、圓形雷達圖表

2、方形雷達圖表

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

4、方形多繪制區域圖表（自定義展示文字）

4、方形多繪制區域圖表（無自定義展示文字）

參數說明

參數	類型	是否必要	說明
radarMap	RadarMapModel	是	包含 圖例，雷達點，雷達資料，半徑 ，雷達種類（圓形，方形），文字最大寬度，内部畫幾條線（LineModel中包含繪制線顔色，文字大小等）
textStyle	style	否	外部繪制文字顔色與大小
isNeedDrawLegend	bool	否	預設為true
lineText	fun	否	内部線上畫的文字，根據資料動态生成，如果為空則不展示
dilogText	fun	否	點選出現的dialog，根據資料動态生成，如果為空則不展示
outLineText	fun	否	外部線上畫的文字，根據資料動态生成，如果為空則不展示

詳細使用說明

圖檔說明

代碼使用說明

1、圖例

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

2、次元資料

如上代碼所示，假設目前有兩個日期次元，（業務假設是兩天的考試）制定兩個次元。

data: [
                  MapDataModel([100,90,90,90,10,20]),
                  MapDataModel([90,90,90,90,10,20]),
                ],      

兩個次元需要配置兩套資料

次元和資料必須對應，兩個次元必須是兩套資料

3、資料組

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

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

4、RadarMapModel中其他基本參數

radius: 130,
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}%",      

整體代碼展示

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}%",
          ),