Flutter图表绘制插件kg_charts的使用

kg_charts

kg_charts图标库。目前，只有雷达图。其他类型的图表可能会在以后添加。

开始

dependencies:
  kg_charts: ^0.0.5

雷达图的效果如下：

雷达图效果1

雷达图效果2

雷达图效果3

雷达图效果4

雷达图效果5

雷达图效果总览

使用示例：

RadarWidget(
  skewing: 0,
  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}%",
)

更多关于Flutter图表绘制插件kg_charts的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter图表绘制插件kg_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

kg_charts 是一个用于在 Flutter 应用中绘制图表的插件。它支持多种图表类型，如折线图、柱状图、饼图等，并且易于使用和定制。以下是如何在 Flutter 项目中使用 kg_charts 的基本步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 kg_charts 依赖：

dependencies:
  flutter:
    sdk: flutter
  kg_charts: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入库

在需要使用图表的 Dart 文件中导入 kg_charts：

import 'package:kg_charts/kg_charts.dart';

3. 基本使用

折线图 (Line Chart)

以下是一个简单的折线图示例：

class LineChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LineChart(
      data: [
        LineSeries(
          name: 'Series 1',
          color: Colors.blue,
          dataPoints: [
            DataPoint(x: 1, y: 10),
            DataPoint(x: 2, y: 20),
            DataPoint(x: 3, y: 30),
            DataPoint(x: 4, y: 40),
          ],
        ),
        LineSeries(
          name: 'Series 2',
          color: Colors.red,
          dataPoints: [
            DataPoint(x: 1, y: 20),
            DataPoint(x: 2, y: 10),
            DataPoint(x: 3, y: 40),
            DataPoint(x: 4, y: 30),
          ],
        ),
      ],
      xAxis: Axis(
        label: 'X Axis',
        showGrid: true,
      ),
      yAxis: Axis(
        label: 'Y Axis',
        showGrid: true,
      ),
      title: 'Line Chart Example',
    );
  }
}

柱状图 (Bar Chart)

以下是一个简单的柱状图示例：

class BarChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BarChart(
      data: [
        BarSeries(
          name: 'Series 1',
          color: Colors.blue,
          dataPoints: [
            DataPoint(x: 'A', y: 10),
            DataPoint(x: 'B', y: 20),
            DataPoint(x: 'C', y: 30),
            DataPoint(x: 'D', y: 40),
          ],
        ),
        BarSeries(
          name: 'Series 2',
          color: Colors.red,
          dataPoints: [
            DataPoint(x: 'A', y: 20),
            DataPoint(x: 'B', y: 10),
            DataPoint(x: 'C', y: 40),
            DataPoint(x: 'D', y: 30),
          ],
        ),
      ],
      xAxis: Axis(
        label: 'X Axis',
        showGrid: true,
      ),
      yAxis: Axis(
        label: 'Y Axis',
        showGrid: true,
      ),
      title: 'Bar Chart Example',
    );
  }
}

饼图 (Pie Chart)

以下是一个简单的饼图示例：

class PieChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PieChart(
      data: [
        PieSeries(
          name: 'Series 1',
          color: Colors.blue,
          value: 30,
        ),
        PieSeries(
          name: 'Series 2',
          color: Colors.red,
          value: 20,
        ),
        PieSeries(
          name: 'Series 3',
          color: Colors.green,
          value: 50,
        ),
      ],
      title: 'Pie Chart Example',
    );
  }
}