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

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

• Essential Studio for Xamarin

• Essential Studio for Windows Forms

• Essential Studio for WPF

• Essential Studio for JavaScript

• Essential Studio for UWP

• Essential Studio Enterprise Edition

• Essential Studio for ASP.NET Core

• Essential Studio for ASP.NET MVC

• Essential Studio for ASP.NET Web Forms

新图表类型

开发团队扩展了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系列产品更多资源或正版授权的朋友，请咨询【客服】了解！

标签：