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

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 {List uidnumData;List ordernumData;List paymoneyData;@overridevoid initState() {// TODO: implement initStatesuper.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)];}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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: [NumericAxis(name: 'yAxis',opposedPosition: true, //在右侧显示title: AxisTitle(text: '金额(元)'))],series: >[ColumnSeries(name: '人数',dataSource: uidnumData,xValueMapper: (ChartData sales, _) => sales.x,yValueMapper: (ChartData sales, _) => sales.y,),ColumnSeries(name: '订单数',dataSource: ordernumData,xValueMapper: (ChartData sales, _) => sales.x,yValueMapper: (ChartData sales, _) => sales.y,//显示数据标签dataLabelSettings: DataLabelSettings(isVisible: true,),),LineSeries(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使用 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！