彩票走势图

Essential Studio 2019v3版本解读:Flutter Charts小部件

翻译|其它|编辑:陈津勇|2019-10-30 11:25:44.720|阅读 679 次

概述:本文主要介绍Essential Studio最新版中Flutter Charts小部件支持的七种新图表类型及其新功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

Syncfusion Flutter控件自今年七月面世后,得到了许多积极的反馈。根据这些反馈,开发团队挑选了七种图表类型插入Essential Studio 2019v3版本。本文,小编将为大家介绍2019v3版本中的新图表类型以及它们带来的一些新功能。

在正式介绍前,您可以选择下载Essential Studio系列产品,以便同步体验Flutter控件:

新图表类型

开发团队扩展了Syncfusion Flutter Charts小部件来支持以下七种图表类型:

  • 堆积柱形图

  • 堆积条形图

  • 堆积折线图

  • 堆积面积图

  • 范围柱形图

  • 金字塔图

  • 漏斗图

堆积柱形图

堆积柱形图允许您通过在垂直条形图中绘制数据点,进行部分到整体的比较。下面的代码演示了如何呈现堆积柱形图:

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">SfCartesianChart(</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  系列:<ChartSeries <_ChartData,String >> [ </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    StackedColumnSeries <_ChartData,String>(</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      dataSource:chartData,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      xValueMapper:(_ChartData sales,_)=> sales.x,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      yValueMapper:(_ChartData sales,_)=>销售。 Y1,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      名称: '产品A' </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    ),</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    //添加更多的系列。</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  ] </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
)</font></font>

堆积条形图

堆积条形图类似于堆积柱形图。与堆积柱形图不同的是,它允许您在水平柱状图的顶部绘制数据点。以下代码说明了如何渲染堆积条形图:

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">SfCartesianChart(</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  系列:<ChartSeries <_ChartData,String >> [ </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    StackedBarSeries <_ChartData,String>(</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      dataSource:chartData,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      xValueMapper:(_ChartData sales,_)=> sales.x,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      yValueMapper:(_ChartData sales,_)=>销售。 Y1,</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      名称: '苹果' </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    ),</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    //添加更多的系列。</font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  ] </font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
)</font></font>

堆积折线图

堆积折线图类似于折线图,只不过数据点被堆叠在彼此的顶部。以下代码说明了如何渲染堆积折线图:

SfCartesianChart(
  series: <ChartSeries<_ChartData, String>>[
    StackedLineSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      yValueMapper: (_ChartData sales, _) => sales.y1,
      name: 'Product A'
    ),
    // Add more series.
  ]
)

堆积面积图

堆积面积图类似于面积图,但是数据点是堆叠在一起的。下面的代码演示了如何呈现堆叠面积图:

SfCartesianChart(
  series: <ChartSeries<_ChartData, String>>[
    StackedAreaSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      yValueMapper: (_ChartData sales, _) => sales.y1,
      name: 'Product A'
    ),
    // Add more series.
  ]
)

范围柱形图

范围柱形图就像是一个柱形图,但条将从指定的最小值开始,而不是0。下面的代码说明了如何渲染范围柱形图:

SfCartesianChart(
  series: <ChartSeries<_ChartData, String>>[
    RangeColumnSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      highValueMapper: (_ChartData sales, _) => sales.high,
      lowValueMapper: (_ChartData sales, _) => sales.low,
      name: 'Product A'
    ),
    // Add more series.
  ]
)

金字塔图

金字塔图在视觉上代表金字塔状结构的层次结构,它显示了总价值的比例。下面的代码演示了如何呈现金字塔图:

SfPyramidChart(
  series: PyramidSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      yValueMapper: (_ChartData sales, _) => sales.y
  )
)

漏斗图

漏斗图绘制流线型数据,显示流程中的各个阶段。下面的代码演示了如何渲染漏斗图:

SfFunnelChart(
  series: FunnelSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      yValueMapper: (_ChartData sales, _) => sales.y
    )
)

新功能

对数轴

以前,Syncfusion Flutter Charts对数字轴、类别轴和日期时间轴三种类型的轴提供支持。现在,它已扩展到支持对数轴,可在对数尺度上绘制数据点。

SfCartesianChart(
  primaryYAxis: LogarithmicAxis(
    logBase: 10
  )
)

轴交叉

轴交叉提供了移动轴位置的支持,适用于垂直轴和水平轴。轴线标签可以放置在轴线附近,也可以放置在标绘区域之外。

SfCartesianChart(
  primaryXAxis: NumericAxis(
    crossesAt: 0
  )
)

绘图带

绘图带也称为条形线,用于用不同的颜色标记轴上的特定范围。另外,您可以根据需要在绘图区中添加文本。

SfCartesianChart(
  primaryXAxis: CategoryAxis(
    plotBands: <PlotBand>[
      PlotBand(
        start: 0,
        end: 2,
        text: 'Winter'
      ),
      // More plot bands.
    ]   
  )
)

动态更新动画

这是一个很有趣的功能——在更改数据源或更新数据时,使用流畅的动画将数据点从旧值转换为新值。实现这一功能不需要新的API,只需要在系列中指定animationDuration的值就能使用。

如果您已经拥有了Syncfusion产品并已更新至最新版(2019v3),可以直接使用Syncfusion Flutter小部件。若您还在犹豫不决,可以返回文章顶部,下载试用Syncfusion产品,体验以上新功能哦~



*想要获得Essential Studio系列产品更多资源或正版授权的朋友,请咨询了解!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
Essential Studio for Xamarin

构建现代的、轻量级的、跨平台的移动APP UI控件套包,支持IOS、Android应用开发

Essential Studio for Windows Forms

功能最全面的Windows Forms界面控件包,帮您创建高性能Windows应用程序

Essential Studio for WPF

帮您轻松创建利于分析且高性能Windows应用程序的WPF界面控件

Essential Studio for ASP.NET Core

帮您创建在Windows,Linux和Mac上运行的Web应用程序

Essential Studio Enterprise Edition

企业级界面开发工具包,包含800多个.NET和JavaScript平台的组件和框架。

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP