Xamarin.Forms 图表Microcharts介绍

Microcharts是一个优秀的开源项目,基于SkiaSharp实现，项目地址 。可以帮助我们实现各种图表功能，如不能满足需求可以尝试oxyplot。
此文只是一个简单的译文，原文地址：https://blog.xamarin.com/microcharts-elegant-cross-platform-charts-for-any-app/

Microcharts 提供了对Android、iOS、macOS、UWP和Xamarin.Forms支持，在任何平台中你都可以方便的使用它。

Data Entries

Microcharts通过Entry加载数据以显示成各种类型图表。
Entry包含哪些值：

• 一个float类型值（必须的）
• Label关联Entry的描述文本
• ValueLabel格式化显示的值
• Color关联Entry显示的颜色

示例代码：

var entries = new []
 {
     new Entry(212)
     {
         Label = "UWP",
         ValueLabel = "212",
         Color = SKColor.Parse("#2c3e50")
     },
     new Entry(248)
     {
         Label = "Android",
         ValueLabel = "248",
         Color = SKColor.Parse("#77d065")
     },
     new Entry(128)
     {
         Label = "iOS",
         ValueLabel = "128",
         Color = SKColor.Parse("#b455b6")
     },
     new Entry(514)
     {
         Label = "Shared",
         ValueLabel = "514",
         Color = SKColor.Parse("#3498db")
} };

Chart Types

下面会列出Microcharts目前支持的图表类型（这是一个开源项目将来可能会增加新的图表）

BarChart(柱形图)

var chart = new BarChart() { Entries = entries };

LineChart(线形图)

var chart = new LineChart() { Entries = entries };

PointChart(散点图[单点])

var chart = new PointChart() { Entries = entries };

RadialGauge(径向仪表盘)

var chart = new RadialGaugeChart() { Entries = entries };

Donut(饼图)

var chart = new DonutChart() { Entries = entries };

Radar(雷达图)

var chart = new RadarChart() { Entries = entries };

Displaying a Chart

接下来要做的就是显示图表。

     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
     xmlns:local="clr-namespace:Microcharts.Samples.Forms"
     x:Class="Microcharts.Samples.Forms.MainPage">
     

声明命名空间xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"，其次定义ChartView对象。
在cs文件中对ChartView的Chart属性进行赋值：this.chartView.Chart = chart;

Chart属性是一个bindable属性,所以我们可以使用绑定的形式实现同样的效果。

Tweaking the Visual Aspect

对于每种图表我们可以进行简单的修改渲染出不同额效果，如LineChart默认显示为：

对线条和点的属性做些修改：

var chart = new LineChart()
 {
   Entries = entries,
   LineMode = LineMode.Straight,
   LineSize = 8,
   PointMode = PointMode.Square,
   PointSize = 18,
};

会呈现如下效果：

---

更多使用请参考示例代码，最后要说明的是Microcharts是一个活跃的开源项目，会持续增加更多图表支持，如果你有能力或问题你可以为它做更多贡献。