Xamarin.Forms學習系列之Syncfusion 制作圖形報表

Syncfusion是一家微軟生態下的第三方組件/控件供應商，除了用於HTML5和JavaScript的控件外，他們產品還涉及如下領域：

• WEB
• ASP.NET MVC
• ASP.NET WebForms
• HTML5/JavaScript
• LightSwitch
• Silverlight
• MOBILE
• iOS
• Android
• Windows Phone
• WinRT
• Xamarin
• HTML5/JavaScript
• Orubase
• DESKTOP
• Windows Forms
• WPF
• FILE FORMATS
• Excel
• PDF
• Word
• Presentation

主要記錄下如何在Xamarin中使用Syncfusion組件

一、在官網注冊一個使用賬號  https://www.syncfusion.com  

二、查看Syncfusion版本，Syncfusion分為社區免費版和付費版，付費版可以免費試用30天，官網有詳細說明

社區免費版需要滿足以下條件：年收入低於100萬美元的公司和個人以及5個以下（包含5個）的開發人員。

然后用LinkedIn或者Xing登錄，就可以獲取社區免費版秘鑰

 

 

https://www.syncfusion.com/downloads/communitylicense

三、30天試用期可以分為兩種，一種是完整的安裝評估，一種是通過nuget安裝程序集， https://www.syncfusion.com/downloads/xamarin/confirm

四、查看官方文檔，了解nuget安裝程序集詳細操作步驟  https://help.syncfusion.com/xamarin/licensing

五、下面詳細介紹如何在Xamarin中添加一個圖形報表

1、獲取試用版本密鑰   https://help.syncfusion.com/xamarin/nuget-packages

登錄官網之后，通過地址 https://www.syncfusion.com/account/manage-trials/downloads  可以獲取許可證密鑰

注意選擇對應的版本，然后保存生成的密鑰

 

2、在Xamrin forms 程序啟動的時候加載密鑰

 在nuget中引用Syncfusion.Licensing程序集，然后再App.xaml.cs文件中加入如下代碼：

public App()
{
    //Register Syncfusion license
    Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
    
    InitializeComponent();
    
    MainPage = new App1.MainPage();
}

3、引用圖表控件，創建圖表頁面 

在nuget中引用Syncfusion.Xamarin.SfChart程序集，然后就可以使用圖表控件了

添加一個示例數據視圖  CategoryAxisViewModel

using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace SampleBrowser.SfChart
{
    public class CategoryAxisViewModel
    {
        public ObservableCollection<ChartDataModel> CategoryData { get; set; }

        public CategoryAxisViewModel()
        {
            CategoryData = new ObservableCollection<ChartDataModel>
            {
                new ChartDataModel("South Korea", 39),
                new ChartDataModel("India", 20),
                new ChartDataModel("South Africa", 61),
                new ChartDataModel("China", 65),
                new ChartDataModel("France", 45),
                new ChartDataModel("Saudi Arabia", 10),
                new ChartDataModel("Japan", 16),
                new ChartDataModel("Mexico", 31)
            };
        }
    }
}

添加一個圖形報表頁面

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"  
             xmlns:sampleBrowser="clr-namespace:SampleBrowser.SfChart"
             x:Class="Mobile.Views.Overview.Listings.ListingPage">
    <ContentPage.Content>

 
            <StackLayout x:Name="stack">
                <StackLayout.Resources>
                    <ResourceDictionary>
                        <DataTemplate x:Key="toolTipTemplate1">
                            <StackLayout BackgroundColor="#404041">
                                <StackLayout.Padding>
                                    <OnPlatform x:TypeArguments="Thickness" WinPhone="3,3,3,3" />
                                </StackLayout.Padding>
                                <Label Text="Users" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" Grid.Row="0" />
                                <BoxView Color="White" HeightRequest="0.75" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                                <StackLayout Orientation="Horizontal"  VerticalOptions="FillAndExpand" BackgroundColor="#404041" Spacing="0" Padding="3" Margin="0">
                                    <Label Text="{Binding Name}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" TextColor="#CCCCCC" FontAttributes="Bold" FontFamily="Helvetica" FontSize="12" />
                                    <Label Text="{Binding Value,StringFormat=' :  {0}M'}" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" />
                                </StackLayout>
                            </StackLayout>
                        </DataTemplate>
                    </ResourceDictionary>
                </StackLayout.Resources>
                <chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <chart:SfChart.Margin>
                        <OnPlatform x:TypeArguments="Thickness" WinPhone="0,0,15,0" />
                    </chart:SfChart.Margin>
                    <chart:SfChart.Title>
                        <chart:ChartTitle Text="Internet Users - 2016" />
                    </chart:SfChart.Title>
                    <chart:SfChart.BindingContext>
                        <sampleBrowser:CategoryAxisViewModel />
                    </chart:SfChart.BindingContext>
                    <chart:SfChart.ChartBehaviors>
                        <chart:ChartTooltipBehavior BackgroundColor="#404041" />
                    </chart:SfChart.ChartBehaviors>
                    <chart:SfChart.PrimaryAxis>
                        <chart:CategoryAxis x:Name="primary" LabelPlacement="BetweenTicks" ShowMajorGridLines="false">
                            <chart:CategoryAxis.LabelStyle>
                                <chart:ChartAxisLabelStyle x:Name="axisLabelStyle" WrappedLabelAlignment="Center" TextColor="Black">
                                    <chart:ChartAxisLabelStyle.MaxWidth>
                                        <OnPlatform x:TypeArguments="x:Double" WinPhone="80" Android="40" iOS="40" />
                                    </chart:ChartAxisLabelStyle.MaxWidth>
                                </chart:ChartAxisLabelStyle>
                            </chart:CategoryAxis.LabelStyle>
                        </chart:CategoryAxis>
                    </chart:SfChart.PrimaryAxis>
                    <chart:SfChart.SecondaryAxis>
                        <chart:NumericalAxis Minimum="0" Maximum="80" IsVisible="false" ShowMajorGridLines="false">
                        </chart:NumericalAxis>
                    </chart:SfChart.SecondaryAxis>
                    <chart:SfChart.Series>
                        <chart:ColumnSeries x:Name="Series" ItemsSource="{Binding CategoryData}" XBindingPath="Name" YBindingPath="Value" EnableTooltip="true" TooltipTemplate="{StaticResource toolTipTemplate1}">
                            <chart:ColumnSeries.ColorModel>
                                <chart:ChartColorModel Palette="Natural"/>
                            </chart:ColumnSeries.ColorModel>
                            <chart:ColumnSeries.DataMarker>
                                <chart:ChartDataMarker >
                                    <chart:ChartDataMarker.LabelStyle>
                                        <chart:DataMarkerLabelStyle LabelPosition="Outer" LabelFormat="#.#'M'" Font="12">
                                        </chart:DataMarkerLabelStyle>
                                    </chart:ChartDataMarker.LabelStyle>
                                </chart:ChartDataMarker>
                            </chart:ColumnSeries.DataMarker>
                        </chart:ColumnSeries>
                    </chart:SfChart.Series>
                </chart:SfChart>
            </StackLayout> 


    </ContentPage.Content>
</ContentPage>

 

syncfusion文檔：https://help.syncfusion.com/xamarin/introduction/overview