Xamarin.FormsでChart.jsみたいに簡単にグラフを描画する3
前回の内容はこちら
今回で三回目になりました。
ソースコードはこちらにあります。
チャートにタイトルを追加する
チャートにタイトルを設定することができます。
追加したソースは以下です。
どの位置に追加しているかはGitのソースを確認してください。
<!--タイトルの追加-->
<chart:SfChart.Title>
<chart:ChartTitle Text="GettingStarted3"/>
</chart:SfChart.Title>
Titleにはいくつかのプロパティがあります。
どのようなプロパティがあるかはこちらで確認してください。
日本語に訳すとこんな感じです。
TextColor – テキストの色を変更するために使用します。
BackgroundColor – 背景色を変更するために使用されます。
BorderColor – 枠線の色を変更するために使用されます。
BorderWidth – 枠線の幅を変更するために使用します。
Font – テキストのサイズ、フォントファミリ、およびフォントの太さを変更するために使用します。(これは非推奨APIです。代わりに FontSize, FontFamily, FontAttributes プロパティを使用してください)。
FontFamily – チャートタイトルのフォントファミリを変更するために使用します。
FontAttributes – チャートタイトルのフォントスタイルを変更するために使用します。
FontSize – チャートタイトルのフォントサイズを変更するために利用されます。
Margin – タイトルのマージンを変更するために使用されます。
Visual Studioのプロパティウィンドウから確認できます。
上記したソースにもTextプロパティでタイトルの値を設定しています。
見てわかる通り、GettingStarted3というのがこのチャートのタイトルになってます。
ところで、タイトルを下部に表示したい場合はどうしたらいいのかというのを探してみたけど、そのようなプロパティは見つからなかった。
一般的にタイトルは上部と決まっているのかわからないが、これは制限事項として捉えておいたほうが良さそうだ。
データラベルを表示してY軸の値をグラフ上に表示させる
グラフ上に値を表示させます。この値はY軸の値です。
ソースでいうと、以下を追加しています。
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
<!--DataMarkerを使ってグラフのデータラベルとしてY軸の値を表示させる-->
<chart:ColumnSeries.DataMarker>
<chart:ChartDataMarker/>
</chart:ColumnSeries.DataMarker>
</chart:ColumnSeries>
こちらもプロパティによってデータラベルのスタイルを変更することができます。こちらが公式の解説になります。
凡例を表示させる
今回は身長を表現したグラフだったので凡例が一つでした。
ソースでいうと、以下二つの部分を変更してます。
<!--凡例を表示-->
<chart:SfChart.Legend>
<chart:ChartLegend/>
</chart:SfChart.Legend>
もう一点が凡例として表示するラベルを追加しています。
以下では、Label="Heights"の部分があたります。
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" Label="Heights">
今回のケースでいうと、凡例も一つなので特に必要性は感じないのですが、例えば円グラフの場合は視認性に大きく貢献します。
他のサンプルで使う予定でしたが、どういうケースかというイメージを持てるように画像を出しておきます。
こちらのケースでは、棒グラフにすれば必要なさそうですが、X軸がない円グラフだと凡例があったほうが見栄えもいいと思います。
少し脱線してしまいました。
凡例の必要性についての話はここまでにしておきます。
ツールチップの表示
ツールチップの表示は、対象をタップすることで表示されます。
今回は、データラベルの内容と被ってしまうので特段必要性を感じません。
少しアレンジを加えて、例えば性別をデータで持たせてツールチップで表示するというようなこともできます。
その場合、Tooltip Templateを使えば付加情報を定義することができます。
グラフで注目したいのは身長ということであれば、性別という情報は重要性が低く、そういう情報は付加情報としてツールチップで表示させたりという用途が考えれます。
上記オプションをすべて含めた全体ソース
今回も例の如くXAMLで記述していくことにしました。
以下が今回説明に使った全体像となります。
こちらのソースいつも通りこちらにあります。
<?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:local="clr-namespace:HowToUseSyncfusionXamarin"
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
x:Class="HowToUseSyncfusionXamarin.GettingStarted.GettingStarted3">
<chart:SfChart>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"></chart:ChartAxisTitle>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis>
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.Series>
<!--凡例に使うLabel="Heights"を追加-->
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" Label="Heights" EnableTooltip ="True">
<!--DataMarkerを使ってグラフのデータラベルとしてY軸の値を表示させる-->
<chart:ColumnSeries.DataMarker>
<chart:ChartDataMarker/>
</chart:ColumnSeries.DataMarker>
</chart:ColumnSeries>
</chart:SfChart.Series>
<!--タイトルの追加-->
<chart:SfChart.Title>
<chart:ChartTitle Text="GettingStarted3"/>
</chart:SfChart.Title>
<!--凡例を表示-->
<chart:SfChart.Legend>
<chart:ChartLegend/>
</chart:SfChart.Legend>
</chart:SfChart>
</ContentPage>