syncfusion_flutter_charts 18.1.59

  • Readme
  • Changelog
  • Example
  • Installing
  • 97

syncfusion_flutter_chart_banner

Syncfusion Flutter Charts #

Syncfusion Flutter Charts是一个数据可视化库,它是用Dart原生编写的,用于创建美观,高性能的图表,这些图表用于使用Flutter制作高质量的移动应用程序用户界面.

Overview #

创建具有无缝交互,响应能力和平滑动画的各种笛卡尔或圆形图表. 它具有丰富的功能集,并且是完全可定制和可扩展的.

免责声明:这是一个商业软件包. 要使用此软件包,您需要拥有Syncfusion商业许可证或Syncfusion社区许可证. 有关更多详细信息,请检查LICENSE文件.

注意:我们的软件包现在与Flutter for Web兼容. 但是,在Flutter for Web稳定之前,它将处于Beta版.

Table of contents #

Chart features #

  • 图表类型 -提供用于渲染25种以上图表类型的功能,即折线,样条曲线,列,条形图,区域,气泡,散点图,阶梯线,快线,范围列,范围区域,阶梯区域,样条区域,堆叠图表,100%堆叠的图表,饼图,甜甜圈,径向条,金字塔,漏斗等.每种图表类型都可以使用内置功能轻松配置和自定义,以创建令人惊叹的视觉效果. flutter_chart_types

  • 轴类型 -在数字,类别,日期时间和对数轴类型的帮助下,在图形中绘制各种类型的数据. 内置的轴功能允许进一步自定义轴元素,以使轴更具可读性. flutter_chart_axis_types

  • 用户交互 -通过包括诸如缩放和平移,十字准线,轨迹球,事件,选择和图表工具提示之类的用户交互功能,极大地增强了最终用户的体验. flutter_chart_user_interactions

  • 图例 -显示有关图表系列的其他信息. 图表图例也可以用于折叠系列. 如果项目超出可用范围,则可以包装或滚动图例. flutter_chart_legend

  • 动态更新 -使用实时数据动态更新图表,这些实时数据会在几秒钟或几分钟内发生变化,例如股价,温度,速度等. flutter_chart_user_interactions

Get the demo application #

通过安装以下应用商店中的示例浏览器应用程序,探索设备上Flutter小部件的全部功能,并在GitHub中查看示例代码.

查看以下内容,以了解有关Syncfusion Flutter图表的更多信息:

Installation #

pub安装最新版本.

Getting started #

导入以下软件包.

import 'package:syncfusion_flutter_charts/charts.dart';

Add chart to the widget tree #

将图表小部件添加为任何小部件的子级. 在这里,图表小部件被添加为容器小部件的子级.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
          )
        )
      )
  );
}

Bind data source #

根据数据,初始化适当的轴类型和系列类型. 在该系列中,映射数据源以及x和y数据点的字段. 要渲染带有类别轴的折线图,请初始化适当的属性.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
            // Initialize category axis
            primaryXAxis: CategoryAxis(),

            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                // Bind data source
                dataSource:  <SalesData>[
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.year,
                yValueMapper: (SalesData sales, _) => sales.sales
              )
            ]
          )
        )
      )
  );
}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

Note

  • 使用SfCartesianChart小部件可以绘制折线图,​​样条图,面积图,柱形图,条形图,气泡图,散点图,步线图和快速折线图.
  • 使用SfCircularChart小部件来呈现饼图,甜甜圈图和径向条形图.
  • 使用SfPyramidChartSfFunnelChart分别呈现金字塔图和漏斗图.

Add chart elements #

添加图表元素,例如标题,图例,数据标签和工具提示,以显示有关在图表中绘制的数据的其他信息.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(

            primaryXAxis: CategoryAxis(),
            // Chart title
            title: ChartTitle(text: 'Half yearly sales analysis'),
            // Enable legend
            legend: Legend(isVisible: true),
            // Enable tooltip
            tooltipBehavior: TooltipBehavior(enable: true),

            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                dataSource:  <SalesData>[
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.year,
                yValueMapper: (SalesData sales, _) => sales.sales,
                // Enable data label
                dataLabelSettings: DataLabelSettings(isVisible: true)
              )
            ]
          )
        )
      )
  );
}

以下屏幕快照说明了以上代码示例的结果.

simple line chart

Support and Feedback #

  • 对于任何其他查询,请联系我们的Syncfusion支持团队,或通过社区论坛发布查询,并通过我们的" 反馈"门户提交功能请求或错误.
  • 要续订,请单击续订或通过salessupport@syncfusion.com与我们的销售团队联系. 免费电话:1-888-9 DOTNET.

About Syncfusion #

Syncfusion成立于2001年,总部位于北卡罗莱纳州的三角研究园,拥有20,000多家客户和100万用户,其中包括大型金融机构,《财富》 500强公司和全球IT咨询公司.

今天,我们提供了1000多种Web控件和框架( ASP.NET CoreASP.NET MVCASP.NET WebFormsJavaScriptAngularReactVueBlazor ,移动设备( XamarinFlutterUWPJavaScript ),以及桌面开发( WinFormsWPFUWP ).我们提供了用于仪表板,报表,数据集成和大数据处理的现成部署企业软件,许多客户通过部署我们的软件节省了数百万美元的许可费用.

[18.1.59] - 06/23/2020 #

Bugs

  • 现在,如果气泡段的大小和minRadius值相同,则气泡段将不呈现.
  • 图例状态已正确维护,该系列不会在动态更新中隐藏.

[18.1.56] - 06/10/2020 #

Bugs

  • 现在,将基于实时更新中的可见点来计算y轴可见范围.
  • 选择单个点不会引发任何异常.

[18.1.55] - 06/03/2020 #

Bugs

  • 堆叠系列的数据标签将正确可见.
  • 现在,图表不会为更多的分数抛出任何异常.
  • 与缩放相关的用户交互正常运行.

[18.1.54] - 05/26/2020 #

Bugs

  • 圆形图表的数据标签已使用StreamBuilder正确呈现.

[18.1.53] - 05/19/2020 #

Bugs

  • 现在,图表小部件将使用多个轴进行渲染,没有任何异常.

[18.1.52] - 05/14/2020 #

Bugs

  • Synchronized panning in multiple charts will be working properly.
  • 现在,将基于可见点和范围来计算轴的范围.
  • 可以随事件定制各个数据标签的背景色.

[18.1.48] - 05/05/2020 #

Bugs

  • 现在,旋转的数据标签在Bar系列中已正确对齐.

[18.1.46] - 04/28/2020 #

重大变化

  • 考虑到可读性,在labelIntersectAction属性中,轴标签的rotate45rotate90labelIntersectAction从45度,90度更改为-45度,-90度.

Features

  • 提供的选项在金融图表类型的高值和低值相同时显示指示.

Bugs

  • 现在,当数据点相互重叠时,工具提示模板将不会闪烁.
  • 技术指标现在可以根据动态变化正确更新.

[18.1.45] - 04/21/2020 #

Bug修复

  • 现在,HiLo系列的标记可以正确渲染.
  • 工具提示正常显示,没有任何异常,并且在网络上闪烁.

[18.1.44] - 04/14/2020 #

Bug修复

  • 对于金融系列和笛卡尔系列的积分较高的跟踪球和十字准线的公共方法将正常工作.

[18.1.43] - 04/07/2020 #

Bug修复

  • 工具提示模板上的用户交互将正常进行.
  • 现在,跟踪球和十字准线的公共方法将在实时更新中正常运行.

[18.1.42] - 04/01/2020 #

没有变化.

[18.1.36] - 03/19/2020 #

Features

  • 提供了对金融图表类型的支持,例如高低(HiLo),高低低开(OHLC)和蜡烛.
  • 为10种类型的技术指标提供支持,即累积分布,ATR,布林带,EMA,动量,RSI,SMA,随机指标,TMA和MACD.
  • 支持6种趋势线,即线性,指数,幂,对数,多项式和移动平均线.
  • 提供的公共方法通过传递数据点/索引/像素值来显示工具提示/轨迹球/十字准线.

[17.4.51] - 02/25/2020 #

没有重大变化.

[17.4.50] - 02/19/2020 #

Bug修复

  • 隐藏的系列不会显示工具提示.
  • 绘图带文本将在平移时正确放置.
  • 带有空白点的样条区域正确渲染.

Features

  • 提供了基于像素,索引和点的显示轨迹球,工具提示,十字线的支持.

[17.4.46] - 01/30/2020 #

Features

  • 提供了基于数据点索引动态显示轨迹球的支持.

Bug修复

  • 现在,当在初始渲染中将isVisible属性设置为false时,该系列将不可见.
  • 数据标签在平移时正确放置.

[17.4.43] - 01/14/2020 #

Bug修复

  • 现在,当未指定最终值时和平移时,绘图带将正确渲染.
  • 现在已正确触发onTrackballPositionChanging事件.
  • 现在,具有可见最小值和最大值的平移在DateTime轴上正常工作.

[17.4.40] - 12/17/2019 #

Features

  • 提供了对100%堆积线,100%堆积面积,100%堆积柱,100%堆积条形图,范围区域,样条区域和步长区域图表类型的支持.
  • 提供支持以延迟隐藏轨迹球和十字准线.
  • 提供了将工具提示显示在指针位置的支持.
  • 通过自定义实现提供了计算空点平均值的支持.

重大变化

  • 区域系列中的borderMode属性已重命名为borderDrawMode .

[17.3.26] - 11/05/2019 #

Bug修复

  • 数据标签放置正确,不会与y轴碰撞.
  • 现在,在选项卡小部件中使用带有工具提示模板的图表时,不会引发异常.

[17.3.14] - 10/03/2019 #

重大变化

  • roundingPlace属性已在轴和工具提示中更改为decimalPlaces .
  • child属性已更改为图表注释中的widget .
  • position属性已在labelAlignment中更改为labelAlignment.
  • imageUrl属性已在markerSettings中更改为image .
  • SfCartesianChart中的backgroundImageUrl属性已更改为backgroundImage .
  • initialSelectedDatIndexes属性已从SfCartesianChart移到系列.

Bug修复

  • 具有point.y值的工具提示格式现在可以正常工作.
  • 具有负值的条形图现在可以正确呈现.

[1.0.0-beta.5] - 09/17/2019 #

Features

  • 堆积线,堆积面积,堆积柱,堆积条,范围柱,金字塔和漏斗图类型.
  • 对数轴.
  • 轴交叉支撑.
  • 绘图带和递归绘图带支持.
  • 动态数据源更新动画.

Bug修复

  • 隐藏的系列不会显示工具提示模板.
  • 现在,对于小十进制值,将正确计算轴间隔.
  • 正常范围填充对于类别轴工作正常.
  • 很少有其他改进和错误修复.

[1.0.0-beta.4] - 08/29/2019 #

Bug fixes

  • 现在,类别轴将与其他范围填充一起正​​常工作.
  • 现在,可以将带有点的类别轴列系列放置在刻度上.
  • 跟踪球互动工具提示将仅针对可见系列显示.
  • 在平移网格线时,网格线将在图表区域内移动.
  • 在动态添加或删除图表系列时,平移将正常工作.
  • 现在,数据标签将不会在滚动时隐藏.
  • 圆图将与图例一起显示在中心位置.
  • 现在,反转轴的平移工作正常.
  • 现在,可以使用onDataLabelRender事件自定义数据标签的外观.
  • 圆形图表中的工具提示和爆炸将一起起作用. 正确地.
  • 散点图系列已使用图像标记正确渲染.
  • 很少有其他改进和错误修复.

[1.0.0-beta] - 07/16/2019 #

初始发行.

Features

  • 折线图,样条线,面积,列,条形图,气泡,散点图,阶梯线,快线,饼图,甜甜圈图和径向条形图类型.
  • 数字,类别和日期时间轴类型.
  • 用户交互功能,例如缩放和平移,轨迹球,十字准线,选择和工具提示.
  • 其他功能,例如动画,标记,数据标签,空白点,图例,注释等.

example/lib/main.dart

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

void main() {
  // Register your license here
  SyncfusionLicense.registerLicense('ADD YOUR LICENSE KEY HERE');
  return runApp(ChartApp());
}

class ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chart Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter chart'),
        ),
        body: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            // Chart title
            title: ChartTitle(text: 'Half yearly sales analysis'),
            // Enable legend
            legend: Legend(isVisible: true),
            // Enable tooltip
            tooltipBehavior: TooltipBehavior(enable: true),
            series: <ChartSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                  dataSource: <SalesData>[
                    SalesData('Jan', 35),
                    SalesData('Feb', 28),
                    SalesData('Mar', 34),
                    SalesData('Apr', 32),
                    SalesData('May', 40)
                  ],
                  xValueMapper: (SalesData sales, _) => sales.year,
                  yValueMapper: (SalesData sales, _) => sales.sales,
                  // Enable data label
                  dataLabelSettings: DataLabelSettings(isVisible: true))
            ]));
  }
}

class SalesData {
  SalesData(this.year, this.sales);

  final String year;
  final double sales;
}

Use this package as a library

1. Depend on it

将此添加到包的pubspec.yaml文件中:


dependencies:
  syncfusion_flutter_charts: ^18.1.59

2. Install it

您可以从命令行安装软件包:

使用Flutter:


$ flutter pub get

另外,您的编辑器可能支持flutter pub get . 查看您的编辑器文档以了解更多信息.

3. Import it

现在,在Dart代码中,您可以使用:


import 'package:syncfusion_flutter_charts/charts.dart';
  
Popularity:
描述该程序包相对于其他程序包的受欢迎程度. [更多]
95
Health:
从静态分析得出的代码运行状况. [更多]
100
Maintenance:
反映出软件包的整洁和最新状态. [更多]
100
Overall:
以上的加权分数. [更多]
97
了解有关得分的更多信息.

我们在2020年6月29日对该软件包进行了分析,并在下面提供了得分,详细信息和建议. using: 分析已完成,状态使用以下命令 :

  • 飞镖:2.8.4
  • 页:0.13.9 + 1
  • 颤振:1.17.3

Analysis suggestions

软件包不支持Flutter平台Linux

由于导入路径[package:syncfusion_flutter_charts / charts.dart,package:syncfusion_flutter_core / core.dart,package:url_launcher / url_launcher.dart]

软件包不支持Flutter平台窗口

由于导入路径[package:syncfusion_flutter_charts / charts.dart,package:syncfusion_flutter_core / core.dart,package:url_launcher / url_launcher.dart]

软件包与SDK dart不兼容

由于导入路径[syncfusion_flutter_charts]

Dependencies

Package Constraint Resolved Available
直接依赖
Dart SDK > = 2.1.0 <3.0.0
flutter 0.0.0
intl > = 0.15.0 <0.17.0 0.16.1
syncfusion_flutter_core ^18.1.59 18.1.59
vector_math ^2.0.8 2.0.8
传递依存关系
collection 1.14.12 1.14.13
flutter_web_plugins 0.0.0
meta 1.1.8
path 1.7.0
platform_detect 1.4.0
plugin_platform_interface 1.0.2
pub_semver 1.4.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
url_launcher 5.4.11
url_launcher_macos 0.0.1+7
url_launcher_platform_interface 1.0.7
url_launcher_web 0.1.1+6
utf 0.9.0+5

by  ICOPY.SITE