Flutter-图表显示charts

引入插件：

charts_flutter: ^0.4.0

ChartFlutterBean

import 'package:charts_flutter/flutter.dart';
import 'package:myself_project/OrdinalSales%20.dart';class ChartFlutterBean {static List<Series<TimeSeriesSales, DateTime>> createSampleData0() {final data = [new TimeSeriesSales(new DateTime(2017, 9, 19), 15),new TimeSeriesSales(new DateTime(2017, 9, 26), 25),new TimeSeriesSales(new DateTime(2017, 10, 9), 20),new TimeSeriesSales(new DateTime(2017, 10, 10), 75),];return [new Series<TimeSeriesSales, DateTime>(id: 'Sales',colorFn: (_, __) => MaterialPalette.blue.shadeDefault,domainFn: (TimeSeriesSales sales, _) => sales.time,measureFn: (TimeSeriesSales sales, _) => sales.sales,data: data,),];}//条形图static List<Series<LinearSales, int>> createSampleData6() {final data = [new LinearSales(0, 5),new LinearSales(1, 25),new LinearSales(2, 100),new LinearSales(3, 75),];return [new Series<LinearSales, int>(id: 'Sales',colorFn: (_, __) => MaterialPalette.blue.shadeDefault,domainFn: (LinearSales sales, _) => sales.year,measureFn: (LinearSales sales, _) => sales.sales,data: data,)];}//多数据折线图static List<Series<LinearSales, int>> createSampleData5() {final myFakeDesktopData = [new LinearSales(0, 5),new LinearSales(1, 25),new LinearSales(2, 100),new LinearSales(3, 75),];var myFakeTabletData = [new LinearSales(0, 10),new LinearSales(1, 50),new LinearSales(2, 200),new LinearSales(3, 150),];var myFakeMobileData = [new LinearSales(0, 15),new LinearSales(1, 75),new LinearSales(2, 300),new LinearSales(3, 225),];return [new Series<LinearSales, int>(id: 'Desktop',colorFn: (_, __) => MaterialPalette.blue.shadeDefault,domainFn: (LinearSales sales, _) => sales.year,measureFn: (LinearSales sales, _) => sales.sales,data: myFakeDesktopData,),new Series<LinearSales, int>(id: 'Tablet',colorFn: (_, __) => MaterialPalette.red.shadeDefault,//dashPattern: [2, 2],domainFn: (LinearSales sales, _) => sales.year,measureFn: (LinearSales sales, _) => sales.sales,data: myFakeTabletData,),new Series<LinearSales, int>(id: 'Mobile',colorFn: (_, __) => MaterialPalette.green.shadeDefault,//dashPattern: [8, 3, 2, 3],domainFn: (LinearSales sales, _) => sales.year,measureFn: (LinearSales sales, _) => sales.sales,data: myFakeMobileData,)];}//饼状图static List<Series<LinearSales, int>> createSampleData1() {final data = [new LinearSales(0, 100),new LinearSales(1, 75),new LinearSales(2, 25),new LinearSales(3, 5),];return [new Series<LinearSales, int>(id: 'Sales',domainFn: (LinearSales sales, _) => sales.year,measureFn: (LinearSales sales, _) => sales.sales,data: data,)];//点}/// Create one series with sample hard coded data.static List<Series<LinearSaless, int>> createSampleData3() {final data = [new LinearSaless(10, 7, 10, 25, 20, 25, 5.0),new LinearSaless(13, 11, 13, 225, 205, 225, 5.0),new LinearSaless(34, 34, 24, 150, 150, 130, 5.0),new LinearSaless(37, 37, 57, 10, 10, 12, 6.5),new LinearSaless(45, 35, 45, 260, 300, 260, 8.0),new LinearSaless(56, 46, 56, 200, 170, 200, 7.0),];final maxMeasure = 300;return [new Series<LinearSaless, int>(id: 'Sales',// Providing a color function is optional.colorFn: (LinearSaless sales, _) {// Bucket the measure column value into 3 distinct colors.final bucket = sales.sales / maxMeasure;if (bucket < 1 / 3) {return MaterialPalette.blue.shadeDefault;} else if (bucket < 2 / 3) {return MaterialPalette.red.shadeDefault;} else {return MaterialPalette.green.shadeDefault;}},domainFn: (LinearSaless sales, _) => sales.year,domainLowerBoundFn: (LinearSaless sales, _) => sales.yearLower,domainUpperBoundFn: (LinearSaless sales, _) => sales.yearUpper,measureFn: (LinearSaless sales, _) => sales.sales,measureLowerBoundFn: (LinearSaless sales, _) => sales.salesLower,measureUpperBoundFn: (LinearSaless sales, _) => sales.salesUpper,// Providing a radius function is optional.radiusPxFn: (LinearSaless sales, _) => sales.radius,data: data,)];}//条形图：static List<Series<OrdinalSales, String>> createSampleData() {final desktopSalesDataA = [new OrdinalSales('2014', 5),new OrdinalSales('2015', 25),new OrdinalSales('2016', 100),new OrdinalSales('2017', 75),];final tableSalesDataA = [new OrdinalSales('2014', 25),new OrdinalSales('2015', 50),new OrdinalSales('2016', 10),new OrdinalSales('2017', 20),];final mobileSalesDataA = [new OrdinalSales('2014', 10),new OrdinalSales('2015', 15),new OrdinalSales('2016', 50),new OrdinalSales('2017', 45),];final desktopSalesDataB = [new OrdinalSales('2014', 5),new OrdinalSales('2015', 25),new OrdinalSales('2016', 100),new OrdinalSales('2017', 75),];final tableSalesDataB = [new OrdinalSales('2014', 25),new OrdinalSales('2015', 50),new OrdinalSales('2016', 10),new OrdinalSales('2017', 20),];final mobileSalesDataB = [new OrdinalSales('2014', 10),new OrdinalSales('2015', 15),new OrdinalSales('2016', 50),new OrdinalSales('2017', 45),];return [new Series<OrdinalSales, String>(id: 'Desktop A',seriesCategory: 'A',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: desktopSalesDataA,),new Series<OrdinalSales, String>(id: 'Tablet A',seriesCategory: 'A',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: tableSalesDataA,),new Series<OrdinalSales, String>(id: 'Mobile A',seriesCategory: 'A',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: mobileSalesDataA,),new Series<OrdinalSales, String>(id: 'Desktop B',seriesCategory: 'B',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: desktopSalesDataB,),new Series<OrdinalSales, String>(id: 'Tablet B',seriesCategory: 'B',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: tableSalesDataB,),new Series<OrdinalSales, String>(id: 'Mobile B',seriesCategory: 'B',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: mobileSalesDataB,),];}List<Series<OrdinalSales, String>> getData() {final desktopSalesData = [new OrdinalSales('2014', 5),new OrdinalSales('2015', 25),new OrdinalSales('2016', 100),new OrdinalSales('2017', 75),];final tabletSalesData = [new OrdinalSales('2014', 25),new OrdinalSales('2015', 50),new OrdinalSales('2016', 10),new OrdinalSales('2017', 20),];final mobileSalesData = [new OrdinalSales('2014', 10),new OrdinalSales('2015', 15),new OrdinalSales('2016', 50),new OrdinalSales('2017', 45),];final otherSalesData = [new OrdinalSales('2014', 20),new OrdinalSales('2015', 35),new OrdinalSales('2016', 15),new OrdinalSales('2017', 10),];return [new Series<OrdinalSales, String>(id: 'Desktop',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: desktopSalesData,),new Series<OrdinalSales, String>(id: 'Tablet',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: tabletSalesData,),new Series<OrdinalSales, String>(id: 'Mobile',domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: mobileSalesData,),new Series<OrdinalSales, String>(id: 'Other',insideLabelStyleAccessorFn: (T, int) {return TextStyleSpec(color: Color.transparent);},domainFn: (OrdinalSales sales, _) => sales.year,measureFn: (OrdinalSales sales, _) => sales.sales,data: otherSalesData,),];}
}

OrdinalSales

/// Sample ordinal data type.
class OrdinalSales {final String year;final int sales;OrdinalSales(this.year, this.sales);
}class TimeSeriesSales {final DateTime time;final int sales;TimeSeriesSales(this.time, this.sales);
}class LinearSales {final int year;final int sales;LinearSales(this.year, this.sales);
}/// Sample linear data type.
class LinearSaless {final int year;final int yearLower;final int yearUpper;final int sales;final int salesLower;final int salesUpper;final double radius;LinearSaless(this.year, this.yearLower, this.yearUpper, this.sales,this.salesLower, this.salesUpper, this.radius);
}

myChart

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:myself_project/ChartFlutterBean%20.dart';void main() {runApp(new MaterialApp(title: 'Container demo',home: new myChart(),));
}class myChart extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new ChartsFlutterState();}
}class ChartsFlutterState extends State<myChart> {bool animate;List<Widget> widgetList = List();@overridevoid initState() {super.initState();loadChartData();}//当整个页面dispose时，记得把控制器也dispose掉，释放内存@overridevoid dispose() {super.dispose();}@overrideWidget build(BuildContext context) {return new Scaffold(body: CustomScrollView(slivers: <Widget>[new SliverAppBar(actions: <Widget>[new Container(child: new Icon(Icons.add,color: Colors.white,),)//],leading: Icon(Icons.add),// title:Text('Demo'),centerTitle: true,pinned: true,//是否固定。backgroundColor: Colors.white,expandedHeight: 150.0,flexibleSpace: new FlexibleSpaceBar(background: Image.asset('images/lonvn9.jpg',fit: BoxFit.cover,),centerTitle: false,title: const Text('图表学习'),),),new SliverFixedExtentList(itemExtent: 150.0,delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {return widgetList[index];},childCount: widgetList.length,),),],),);}void loadChartData() async {//1.折线图widgetList.add(new charts.TimeSeriesChart(ChartFlutterBean.createSampleData0(),animate: animate,// Optionally pass in a [DateTimeFactory] used by the chart. The factory// should create the same type of [DateTime] as the data provided. If none// specified, the default creates local date time.dateTimeFactory: new charts.LocalDateTimeFactory(),),);//6.折线图widgetList.add(new charts.LineChart(ChartFlutterBean.createSampleData6(),animate: animate,));//5.多数据折线图widgetList.add(new charts.LineChart(ChartFlutterBean.createSampleData5(),animate: animate,));//2.病壮图widgetList.add(new charts.PieChart(ChartFlutterBean.createSampleData1(),animate: animate,// Configure the width of the pie slices to 60px. The remaining space in// the chart will be left as a hole in the center.defaultRenderer: new charts.ArcRendererConfig(arcWidth: 60),),);//3.银光棒图。哈哈widgetList.add(new charts.ScatterPlotChart(ChartFlutterBean.createSampleData3(),animate: animate,defaultRenderer: new charts.PointRendererConfig(pointRendererDecorators: [new charts.ComparisonPointsDecorator(symbolRenderer: new charts.CylinderSymbolRenderer(),),],),),);//条形widgetList.add(new charts.BarChart(ChartFlutterBean.createSampleData(),animate: animate,barGroupingType: charts.BarGroupingType.groupedStacked,),);//柱状图widgetList.add(new charts.BarChart(new ChartFlutterBean().getData(),animate: animate,behaviors: [new charts.SeriesLegend(position: charts.BehaviorPosition.end, desiredMaxRows: 2),],),);}
}

Flutter-图表显示charts_flutter相关推荐

Flutter 图表控件使用笔记
Flutter 图表控件使用笔记最近有图表绘制需要,记录下现有的Flutter主流实现方式原文链接:https://blog.csdn.net/weixin_44259356/article/de ...
ChartPart 图表显示
上一篇中介绍了jQuery的图表显示.在SharePoint中显示图表的另一个不错的选择是 ChartPart.ChartPart是一个开源的SharePoint WebPart.主要用于ShareP ...
boost::math模块实现图表显示使用 Lambert W 函数计算电流的测试程序
boost::math模块实现图表显示使用 Lambert W 函数计算电流的测试程序实现功能 C++实现代码实现功能 boost::math模块实现图表显示使用 Lambert W 函数计算电流 ...
解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
Python-股票-图表显示主要财务指标
将下载的个股财务指标以图表显示(仅供娱乐),其中Chinese是一个定义的输出汉字的库,是在别人的代码基础是修改的,改时贴出(手头这台电脑上没有). import matplotlib.pyplot ...
html链接文件不可用,使用PPT 图表显示链接文件不可用怎么解决啊？(excel放进ppt)...
PPT中EXCEL图表链接不能更新这个过程是没问题的,但是需要注意的一点是在你拷贝的过程中不能更换文件的保存路径,就是说你拷贝的东西需要是原先设计的哪一个整体,不能做任何更改. ppt中插入exce ...
echarts图表显示相关
最近做了一个跟图表显示相关得项目,在图表插件得选用上,我使用了百度得插件echarts.一些基本的功能文档里都写的很清楚. 在这里主要说明一下,如何自定义toolbox里得工具,以实现自己想要得功能. ...
python计算财务指标,Python-股票-图表显示主要财务指标
将下载的个股财务指标以图表显示(仅供娱乐),其中Chinese是一个定义的输出汉字的库,是在别人的代码基础是修改的,改时贴出(手头这台电脑上没有). import matplotlib.pyplot ...
ECharts统计数据以图表显示
ECharts统计数据以图表显示 1:简介 ECharts用于图表展示,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数据可视化的 ...
RK3399 Android7.1去掉设置-电池中的使用时间和剩余时间图表显示
去掉设置-电池中的显示剩余时间时间的那个图表显示,以及屏幕顶端状态栏里的电池图标点击后的图表显示.如下: diff --git a/frameworks/base/packages/SystemUI/ ...

Flutter-图表显示charts_flutter

Flutter-图表显示charts_flutter相关推荐

最新文章

热门文章