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

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显示的颜色

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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(柱形图)

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

LineChart(线形图)

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

PointChart(散点图[单点])

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

RadialGauge(径向仪表盘)

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

Donut(饼图)

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

Radar(雷达图)

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

Displaying a Chart

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

1
2
3
4
5
6
7
8
<ContentPage>
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">
<microcharts:ChartView x:Name="chartView" />
</ContentPage>

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

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

Tweaking the Visual Aspect

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

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

1
2
3
4
5
6
7
8
var chart = new LineChart()
{
Entries = entries,
LineMode = LineMode.Straight,
LineSize = 8,
PointMode = PointMode.Square,
PointSize = 18,
};

会呈现如下效果:


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

最后更新: 2017年11月04日 10:39

原始链接: http://xamarin.xyz/2017/10/15/Xamarin-Forms-图表Microcharts介绍/