彩票走势图

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

在正式介绍前，您可以选择下载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系列产品更多资源或正版授权的朋友，请咨询了解！