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
接下来要做的就是显示图表。
<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默认显示为:
对线条和点的属性做些修改:
var chart = new LineChart()
{
Entries = entries,
LineMode = LineMode.Straight,
LineSize = 8,
PointMode = PointMode.Square,
PointSize = 18,
};
会呈现如下效果:
更多使用请参考示例代码,最后要说明的是Microcharts是一个活跃的开源项目,会持续增加更多图表支持,如果你有能力或问题你可以为它做更多贡献。