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系列產品更多資源或正版授權的朋友，請咨詢了解！