Xamarin.AndroidでSfChart | そんちょーのブログ

Xamarin.Androidでグラフ表示したい場合、SfChartがおすすめです。

Xamarin.AndroidでのSfChartの使い方を紹介します。

インストール

VisualStudioでXamarin.Androidプロジェクトを開いて、
プロジェクト/NuGetパッケージの管理
を選択

Xamarin.Android SfCharで検索してインストール。下の画像では上から二つ目のやつですね。

ライセンスを取得

公式のライセンスの導入に関するドキュメントはここです

https://www.syncfusion.com/downloads/communitylicense でアカウントを取得してログインします。 LinkedIn のアカウントが必要なので、持ってなかったらそれも取ってください。

ログインしたら、トップページからGet License Keyを選んで、PlatformをXamarinにして、プロジェクト名を入れて、取得。

取得したライセンスキーは無くさないようにメールアドレスにも転送を指定しておきましょう。

VisualStudioでXamarinプロジェクトを開いて、SfChartの機能を使う前に

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

1	Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

を宣言すれば使えます。

SfChartチュートリアル

線グラフを書いてみます。
公式のチュートリアルはここに書いてあるので、詳しく知りたい場合は参照してください。

namespaceを宣言します。

using Com.Syncfusion.Charts;

1	using Com.Syncfusion.Charts;

データをグラフに渡すクラスを作ります。
理屈はよくわからないですが、変数にgetterとsetterを付けないとSfChartが反応してくれないです。詳しい人教えてほしい。

public class DateData
{
    public string Date { get; set; }
    public double Value { get;set; }
}

public class DateData

{

public string Date { get; set; }

public double Value { get;set; }

}

線グラフを作ります

SfChart chart = new SfChart(context);
chart.Title.Text = "Chart";
chart.SetBackgroundColor(Color.White);

CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Title.Text = "日";
chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Minimum = 0;
secondaryAxis.Maximum = 10;
chart.SecondaryAxis = secondaryAxis;

List&lt;DateData> data = new List&lt;DateData>()
{
      new Data{Text="10/24",Value=1},
      new Data{Text="10/25",Value=2},
      new Data{Text="10/26",Value=3},
      new Data{Text="10/27",Value=4},
      new Data{Text="10/28",Value=5},
      new Data{Text="10/29",Value=6},
      new Data{Text="10/30",Value=7},
};
LineSeries series = new LineSeries();
series.ItemsSource = data;
series.XBindingPath = "Text";
series.YBindingPath = "Value";
series.Label = "時間";
chart.Series.Add(series);

SfChart chart = new SfChart(context);

chart.Title.Text = "Chart";

chart.SetBackgroundColor(Color.White);

CategoryAxis primaryAxis = new CategoryAxis();

primaryAxis.Title.Text = "日";

chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();

secondaryAxis.Minimum = 0;

secondaryAxis.Maximum = 10;

chart.SecondaryAxis = secondaryAxis;

List<DateData> data = new List<DateData>()

{

new Data{Text="10/24",Value=1},

new Data{Text="10/25",Value=2},

new Data{Text="10/26",Value=3},

new Data{Text="10/27",Value=4},

new Data{Text="10/28",Value=5},

new Data{Text="10/29",Value=6},

new Data{Text="10/30",Value=7},

};

LineSeries series = new LineSeries();

series.ItemsSource = data;

series.XBindingPath = "Text";

series.YBindingPath = "Value";

series.Label = "時間";

chart.Series.Add(series);

グラフをビューに追加します。

layout.AddView(lineChart);

1	layout.AddView(lineChart);

ちょっと自分もよくわかってないんですけど、SfChartを入れるレイアウトを大きめに設定しないとうまく表示されなかったです。