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

最新推荐文章于 2024-03-30 05:28:39 发布

feiyue0823

最新推荐文章于 2024-03-30 05:28:39 发布

阅读量2.8k

点赞数 2

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

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

版权

Flutter 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

SfCartesianChart class - charts library - Dart APIhttps://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev

pubspec.yaml引用

syncfusion_flutter_charts: ^19.3.56

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

/**
 * author: flymbp
 * created on: 12/30/21 10:53 AM
 * description:
 */

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List<ChartData> uidnumData;
  List<ChartData> ordernumData;
  List<ChartData> paymoneyData;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    uidnumData = [
      ChartData('2021-01', 10),
      ChartData('2021-02', 20),
      ChartData('2021-03', 30),
      ChartData('2021-04', 25)
    ];
    ordernumData = [
      ChartData('2021-01', 15),
      ChartData('2021-02', 40),
      ChartData('2021-03', 35),
      ChartData('2021-04', 50)
    ];
    paymoneyData = [
      ChartData('2021-01', 20000),
      ChartData('2021-02', 40000),
      ChartData('2021-03', 30000),
      ChartData('2021-04', 60000)
    ];
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SfCartesianChart(
        primaryXAxis: CategoryAxis(
          isVisible: true,
          //显示时间轴置顶
          opposedPosition: false,
          //时间轴反转
          isInversed: false,
          labelRotation: -45,
        ),
        //标题
        title: ChartTitle(text: '活跃客户'),
        //选中类型
        selectionType: SelectionType.series,
        //时间轴与值轴换位
        isTransposed: false,
        //选中手势
        selectionGesture: ActivationMode.singleTap,
        // //图示
        legend: Legend(
            isVisible: true,
            iconHeight: 10,
            iconWidth: 10,
            //切换系列显示
            toggleSeriesVisibility: true,
            //图示显示位置
            position: LegendPosition.bottom,
            overflowMode: LegendItemOverflowMode.wrap,
            //图示左右位置
            alignment: ChartAlignment.center),
        //打开工具提示
        tooltipBehavior: TooltipBehavior(
          enable: true,
          shared: true,
          activationMode: ActivationMode.singleTap,
        ),
        axes: <ChartAxis>[
          NumericAxis(
              name: 'yAxis',
              opposedPosition: true, //在右侧显示
              title: AxisTitle(text: '金额(元)'))
        ],
        series: <ChartSeries<ChartData, String>>[
          ColumnSeries<ChartData, String>(
            name: '人数',
            dataSource: uidnumData,
            xValueMapper: (ChartData sales, _) => sales.x,
            yValueMapper: (ChartData sales, _) => sales.y,
          ),
          ColumnSeries<ChartData, String>(
            name: '订单数',
            dataSource: ordernumData,
            xValueMapper: (ChartData sales, _) => sales.x,
            yValueMapper: (ChartData sales, _) => sales.y,
            //显示数据标签
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
            ),
          ),
          LineSeries<ChartData, String>(
              name: '金额',
              dataSource: paymoneyData,
              xValueMapper: (ChartData sales, _) => sales.x,
              yValueMapper: (ChartData sales, _) => sales.y,
              //修饰数据点(显示圆圈)
              markerSettings: MarkerSettings(isVisible: true),
              yAxisName: 'yAxis'),
        ]);
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.color]);

  final String x;
  final double y;
  final Color color;
}

Flutter syncfusion_flutter_charts 饼图PieSeries使用 Flutter syncfusion_flutter_charts 横向条状图BarSeries使用