Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms組件套包，包含最快的圖表和網(wǎng)格。本文介紹了如何在Xamarin.Forms中創(chuàng)建交互式圖表。

點(diǎn)擊下載Essential Studio for Xamarin正式版

在移動(dòng)應(yīng)用程序中使用圖表顯示數(shù)據(jù)是很常見(jiàn)的，但是繪制圖表可能非常困難。它需要進(jìn)行大量計(jì)算，找出所有點(diǎn)之間的距離，然后將其繪制在圖表上。

為了使事情變得更加困難，我們需要使用特定于平臺(tái)的iOS和Android API，以便在屏幕上繪制圖表并實(shí)現(xiàn)觸摸手勢(shì)。

讓我們探討如何利用Syncfusion Charts來(lái)簡(jiǎn)化生活，減少計(jì)算量，并允許我們在Xamarin.Forms中使用跨平臺(tái)API ！

在這里您可以找到完整的代碼示例：

• CreateInteractiveCharts：此演練的完整代碼。
• GitTrends：一個(gè)iOS和Android應(yīng)用程序，用于監(jiān)視GitHub存儲(chǔ)庫(kù)中發(fā)生的視圖和克隆。

Android	iOS

在Syncfusion之前繪制圖表

要在不使用Syncfusion的情況下繪制圖表，我們使用iOS和Android 上的CoreGraphics.CGContext和CoreGraphics.CGPoint等庫(kù)，以及Android上的Android.Graphics.Path和Android.Graphics.Paint。這些庫(kù)是特定于平臺(tái)的，這意味著我們不能在Xamarin.Forms跨平臺(tái)UI中使用它們。

例如，從XWeather（使用Xamarin.iOS和Xamarin.Android構(gòu)建的天氣應(yīng)用程序）中簽出此代碼。

XWeather，iOS示例

var graphRect = new CGRect (rect.X + padding, rect.Y + padding, rect.Width - (padding * 2), rect.Height - (padding * 2));
// ...
var scaleHigh = NMath.Round (highest, MidpointRounding.AwayFromZero);
var scaleLow = lowest < 0 ? NMath.Round (lowest, MidpointRounding.AwayFromZero) : NMath.Round (lowest); // ... var rangePadding = Settings.UomTemperature.IsImperial () ? scalePadding : (scalePadding / 2); using var cgContex = UIGraphics.GetCurrentContext(); using var point = new CGPath (); point.MoveToPoint(graphRect.GetMinX (), graphRect.GetMaxY ()); point.AddLines(new [] { new CGPoint(graphRect.GetMinX (), graphRect.GetMinY ()), new CGPoint(graphRect.GetMinX (), graphRect.GetMaxY ()), new CGPoint(graphRect.GetMaxX (), graphRect.GetMaxY ()) }); cgContex.AddPath(p); cgContex.DrawPath(CGPathDrawingMode.Stroke);

XWeather，Android示例

var graphRect = new RectF (padding, padding, canvas.Width - padding, canvas.Height - padding);

using var path = new Path();
path.MoveTo(graphRect.Left, graphRect.Top);

path.LineTo(graphRect.Left, graphRect.Bottom);
path.LineTo(graphRect.Right, graphRect.Bottom);

paint.SetStyle(Paint.Style.Stroke);

canvas.DrawPath(path, paint);

所有這些代碼，我們甚至還沒(méi)有涉及添加平移和縮放之類的觸摸手勢(shì)。

讓我們看看如何使用Syncfusion做到這一點(diǎn)。

使用Syncfusion繪制圖表

Syncfusion通過(guò)使用SfCharts庫(kù)使我們的生活更輕松。它不需要任何復(fù)雜的計(jì)算，而且最重要的是，它是跨平臺(tái)的，可以在我們的Xamarin.Forms項(xiàng)目中使用！

讓我們看一下如何安裝和實(shí)現(xiàn)SfCharts。

0.開(kāi)始

安裝Syncfusion NuGet軟件包

將軟件包安裝到每個(gè)項(xiàng)目中，例如.NET Standard項(xiàng)目，Xamarin.iOS項(xiàng)目和Xamarin.Android項(xiàng)目。

初始化Syncfusion圖表，iOS

在AppDelegate.cs的FinishedLaunching方法中，添加Syncfusion.SfChart.XForms.iOS.Renderers.SfChartRenderer.Init（）；在Xamarin.Forms.Forms.Init（）之后。

這里有一個(gè)例子。

public class AppDelegate : Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        Xamarin.Forms.Forms.Init();
        Syncfusion.SfChart.XForms.iOS.Renderers.SfChartRenderer.Init();

        LoadApplication(new App());

        return base.FinishedLaunching(app, options);
    }
}

本文內(nèi)容較多，請(qǐng)點(diǎn)擊下方鏈接查看后半部分內(nèi)容，感興趣的朋友可以下載Essential Studio for Xamarin試用版免費(fèi)體驗(yàn)~您也可以關(guān)注我們慧都網(wǎng)了解更多產(chǎn)品資訊~

相關(guān)內(nèi)容推薦：

Essential Studio for Xamarin教程：如何在Xamarin.Forms中創(chuàng)建交互式圖表（下）

Essential Studio for Xamarin教程：如何導(dǎo)出帶注釋的PDF，節(jié)省內(nèi)存？