Flutter 横向柱图BarSeries使用

最新推荐文章于 2023-07-25 17:46:59 发布

feiyue0823

最新推荐文章于 2023-07-25 17:46:59 发布

阅读量1.6k

点赞数

分类专栏： Flutter 文章标签： flutter ios android barchart

本文链接：https://blog.csdn.net/feiyue0823/article/details/122064690

版权

Flutter 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Flutter Bar Chart | Horizontal Bar Chart | Syncfusionhttps://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bar-chart

pubspec.yaml引用

syncfusion_flutter_charts: ^19.3.56

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
 
class AnalysisCustomerPage extends StatefulWidget {
  @override
  _AnalysisCustomerPageState createState() => _AnalysisCustomerPageState();
}
 
class _AnalysisCustomerPageState extends State<AnalysisCustomerPage> {
  List<ChartData> customerData = [];
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    customerData.add(ChartData('一般挽留客户', 1));
    customerData.add(ChartData('一般保持客户', 3));
    customerData.add(ChartData('一般发展客户', 2));
    customerData.add(ChartData('一般价值客户', 4));
    customerData.add(ChartData('重要挽留客户', 8));
    customerData.add(ChartData('重要保持客户', 5));
    customerData.add(ChartData('重要发展客户', 7));
    customerData.add(ChartData('重要价值客户', 6));
  }
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Container(
          padding: EdgeInsets.all(15),
          child: SfCartesianChart(
          //标题
          title: ChartTitle(text: '客户价值分类'),
          //图示
          legend: Legend(
              isVisible: true,
              iconHeight: 10,
              iconWidth: 10,
              //切换系列显示
              toggleSeriesVisibility: true,
              //图示显示位置
              position: LegendPosition.bottom,
              overflowMode: LegendItemOverflowMode.wrap,
              //图示左右位置
              alignment: ChartAlignment.center),
          primaryXAxis: CategoryAxis(),
          // 自定义y轴数值
          primaryYAxis: NumericAxis(minimum: 0, maximum: 10, interval: 2),
          series: <ChartSeries<ChartData, String>>[
            BarSeries<ChartData, String>(
              name: '客户人数',
              color: CatStyle.color_sub1,
              dataSource: customerData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
              //显示数据标签
              dataLabelSettings: DataLabelSettings(
                isVisible: true,
                labelAlignment: ChartDataLabelAlignment.outer,
                textStyle: TextStyle(fontSize: 14),
              ),
            ),
          ]),
        )
      ],
    );
  }
}
 
class ChartData {
  ChartData(this.x, this.y);
 
  final String x;
  final double y;
}

Flutter syncfusion_flutter_charts 饼图PieSeries使用

Flutter 双纵轴柱图和折线图结合