前言
现在很多的东西都和大数据结合起来,因此许许多多的app里面也要做数据图表的处理。今天博主就在这里分享一个插件,也是最近才发现的。感觉比之前分享的结合echarts好多了。
实现效果
1.折现数据图
实例代码分析
引入插件
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
syncfusion_flutter_charts: ^1.0.0-beta.1 //数据图表插件
具体的代码
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
SfCartesianChart getDefaultLineChart(bool isTileView) {
return SfCartesianChart(
plotAreaBorderWidth: 0,
title: ChartTitle(text: '店铺销售数据'),
legend: Legend(
isVisible: isTileView ? false : true,
overflowMode: LegendItemOverflowMode.wrap),
primaryXAxis: NumericAxis(
edgeLabelPlacement: EdgeLabelPlacement.shift,
interval: 5,
majorGridLines: MajorGridLines(width: 0)),
primaryYAxis: NumericAxis(
labelFormat: '{value}%',
axisLine: AxisLine(width: 0),
majorTickLines: MajorTickLines(color: Colors.transparent)),
series: getLineSeries(isTileView),
tooltipBehavior: TooltipBehavior(enable: true),
);
}
List<LineSeries<_ChartData, num>> getLineSeries(bool isTileView) {
final List<_ChartData> chartData = <_ChartData>[
_ChartData(2005, 21, 28),
_ChartData(2006, 24, 44),
_ChartData(2007, 36, 48),
_ChartData(2008, 38, 50),
_ChartData(2009, 54, 66),
_ChartData(2010, 57, 78),
_ChartData(2011, 70, 84),
_ChartData(2012, 50, 60),
_ChartData(2013, 88, 70),
_ChartData(2014, 60, 40),
_ChartData(2015, 80, 60),
_ChartData(2016, 40, 50),
_ChartData(2017, 20, 10),
_ChartData(2018, 90, 100),
_ChartData(2019, 30, 50),
];
return <LineSeries<_ChartData, num>>[
LineSeries<_ChartData, num>(
animationDuration: 2500,
enableTooltip: true,
dataSource: chartData,
xValueMapper: (_ChartData sales, _) => sales.x,
yValueMapper: (_ChartData sales, _) => sales.y,
width: 2,
name: 'Germany',
markerSettings: MarkerSettings(isVisible: true)),
LineSeries<_ChartData, num>(
animationDuration: 2500,
enableTooltip: true,
dataSource: chartData,
width: 2,
name: 'England',
xValueMapper: (_ChartData sales, _) => sales.x,
yValueMapper: (_ChartData sales, _) => sales.y2,
markerSettings: MarkerSettings(isVisible: true)),
];
}
class _ChartData {
_ChartData(this.x, this.y, this.y2);
final double x;
final double y;
final double y2;
}
这个插件刚刚出现不久,今天看到了研究一下感觉挺不错的。和大家分享一下。插件GitHub地址