Essential Studio for Xamarin教程：如何在Xamarin.Forms中创建交互式图表（上）

本文介绍了如何在Xamarin.Forms中创建交互式图表。探讨了如何利用Syncfusion Charts来简化生活，减少计算量，并允许我们在Xamarin.Forms中使用跨平台API ！

Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包，包含最快的图表和网格。本文介绍了如何在Xamarin.Forms中创建交互式图表。

Essential Studio for Xamarin正式版

在移动应用程序中使用图表显示数据是很常见的，但是绘制图表可能非常困难。它需要进行大量计算，找出所有点之间的距离，然后将其绘制在图表上。

为了使事情变得更加困难，我们需要使用特定于平台的iOS和Android API，以便在屏幕上绘制图表并实现触摸手势。

让我们探讨如何利用Syncfusion Charts来简化生活，减少计算量，并允许我们在Xamarin.Forms中使用跨平台API ！

在这里您可以找到完整的代码示例：

• CreateInteractiveCharts：此演练的完整代码。
• GitTrends：一个iOS和Android应用程序，用于监视GitHub存储库中发生的视图和克隆。

Android	iOS

在Syncfusion之前绘制图表

要在不使用Syncfusion的情况下绘制图表，我们使用iOS和Android 上的CoreGraphics.CGContext和CoreGraphics.CGPoint等库，以及Android上的Android.Graphics.Path和Android.Graphics.Paint。这些库是特定于平台的，这意味着我们不能在Xamarin.Forms跨平台UI中使用它们。

例如，从XWeather（使用Xamarin.iOS和Xamarin.Android构建的天气应用程序）中签出此代码。

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);

所有这些代码，我们甚至还没有涉及添加平移和缩放之类的触摸手势。

让我们看看如何使用Syncfusion做到这一点。

使用Syncfusion绘制图表

Syncfusion通过使用SfCharts库使我们的生活更轻松。它不需要任何复杂的计算，而且最重要的是，它是跨平台的，可以在我们的Xamarin.Forms项目中使用！

让我们看一下如何安装和实现SfCharts。

0.开始

安装Syncfusion NuGet软件包

将Syncfusion.Xamarin.SfChart NuGet软件包安装到每个项目中，例如.NET Standard项目，Xamarin.iOS项目和Xamarin.Android项目。

初始化Syncfusion图表，iOS

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

这里有一个例子。

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);    }}

本文内容较多，请点击下方链接查看后半部分内容，感兴趣的朋友可以下载Essential Studio for Xamarin试用版免费体验~您也可以关注我们网了解更多产品资讯~

相关内容推荐：

Essential Studio for Xamarin教程：如何在Xamarin.Forms中创建交互式图表（下）

Essential Studio for Xamarin教程：如何导出带注释的PDF，节省内存/span>

想要购买该产品正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都