Windows10 IoT Core でグラフを描く・導入編


#概要
Raspberry PiとWindows 10 IoT Coreを使って、UWPアプリ上でグラフを表示する方法を紹介します。
ここでは、[「LiveCharts」](https://lvcharts.net/)を使用しました。

#結果
このような感じで表示できます。

###例
- 折れ線グラフ、棒グラフ、線グラフを描画
- 凡例を右側に表示
- 縦軸、横軸の表示とフォントの変更
 
![do.png](https://qiita-image-store.s3.amazonaws.com/0/145581/8a3c7399-61a7-a2cf-6e55-7fa0d5dbef77.png)

###サンプルコード
https://github.com/trihome/WIoT_Samples/tree/master/001_LiveCharts

#準備

###UWPアプリのプロジェクトを作成

1.「空白のアプリ（ユニバーサルWindows）」を選択
![proj.png](https://qiita-image-store.s3.amazonaws.com/0/145581/46def624-a2f3-fdd3-fbbc-64c610c98f69.png)

###LiveChartsパッケージをインストール

1. 「LiveCharts」で検索して、「LiveCharts.UWP」を選択
![nugetlist.png](https://qiita-image-store.s3.amazonaws.com/0/145581/9fd98b3e-fa63-70cc-8925-8097619f4985.png)

2. UWPアプリのプロジェクトを選んで、「インストール」ボタンを押す
![nuget_livecharts.png](https://qiita-image-store.s3.amazonaws.com/0/145581/02d5fe2a-9172-6373-58b0-6640c6ddc608.png)

3. インストールが完了
![nugetinstall02.png](https://qiita-image-store.s3.amazonaws.com/0/145581/c0fa5512-cc2a-4cf1-b74d-1030afab3e4b.png)

###コントロールを配置するまで

- usingを追加

```c#:MainPage.xaml.cs
using LiveCharts;
using LiveCharts.Uwp;
```

- SeriesCollection プロパティを追加

```c#:MainPage.xaml.cs
namespace _001_LiveCharts
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public SeriesCollection Sc{ get; set; } = new SeriesCollection();

        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}
```

- MainPage.xaml の冒頭に、`xmlns:lvc="using:LiveCharts.Uwp` を追記（下記コードの８行目）

```xml:MainPage.xaml
<Page
    x:Class="_001_LiveCharts.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_001_LiveCharts"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveCharts.Uwp"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
（以降、省略）
```

- グラフの見出しとなるStackPanelと、LiveChartコントロールを配置する

```xml:MainPage.xaml
（冒頭、省略）
    <Grid>
        <!--ページを2分割にする-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <StackPanel Grid.Row="0" >
            <Grid Background="DarkSlateGray">
                <!--見出しを配置-->
                <TextBlock Text="　グラフ" Foreground="White"/>
            </Grid>
            <Grid Background="DarkGray" >
                <!--ボタンを配置-->
                <Button Name="Btn_Draw" Content="Draw" Click="Btn_Draw_Click"/>
            </Grid>
        </StackPanel>

        <!--LiveChartを配置-->
        <Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <lvc:CartesianChart x:Name="LC_Graph" Series="{x:Bind Path=Sc}" />
        </Grid>

    </Grid>
</Page>

```

- この時点でデザイナーを見ると、このようになっています。
![view.png](https://qiita-image-store.s3.amazonaws.com/0/145581/fdf723fa-56b9-9383-2516-6c35b3ddae51.png)


#値を代入してグラフを描く

[UWPで選択できるグラフ](https://lvcharts.net/App/examples/v1/uwp/Available%20Charts)はこちらを参考にしてください。

ひとまず、ランダムな値を代入して、グラフを書くところまでのコードです。

- コンストラクタ

```c#:MainPage.cs
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainPage()
        {
            this.InitializeComponent();

            DataContext = this;
        }
```

- ボタンイベント

```c#:MainPage.cs
        /// <summary>
        /// ボタンをクリック
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Btn_Draw_Click(object sender, RoutedEventArgs e)
        {
            /////////////////////////////////////
            //ステップ１：系列にグラフを追加
            /////////////////////////////////////
            Sc.Clear();
            Sc.Add(
                new LineSeries                     //折れ線グラフ
                {
                    //凡例名
                    Title = "折れ線",
                    //系列値
                    Values = new ChartValues<long>(),
                    //線の色（省略：自動で配色されます）
                    //Stroke = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red),
                    //直線のスムージング（0：なし、省略：あり）
                    //LineSmoothness = 0,

                });

            Sc.Add(
                new ColumnSeries                    //棒グラフ
                {
                    Title = "棒",
                    Values = new ChartValues<long>(),
                    //Stroke = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red),
                });

            Sc.Add(
                new StepLineSeries                  //線グラフ
                {
                    Title = "線",
                    Values = new ChartValues<long>(),
                    //Stroke = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red),
                });


            /////////////////////////////////////
            //ステップ２:LiveChartの設定
            /////////////////////////////////////
            //凡例の表示位置
            LC_Graph.LegendLocation = LegendLocation.Right;

            //軸の設定
            LC_Graph.AxisX.Clear();     //デフォルトで設定されている軸をクリア
            LC_Graph.AxisX.Add(new Axis { Title = "横軸", FontSize = 20 });
            LC_Graph.AxisY.Clear();
            LC_Graph.AxisY.Add(new Axis { Title = "縦軸", FontSize = 20, MinValue = 0 });


            /////////////////////////////////////
            //ステップ３:値をランダムに追加
            /////////////////////////////////////

            Random rnd = new Random();
            
            //各系列に、それぞれ値を代入
            for (int iSeries = 0; iSeries < Sc.Count; iSeries++)
            {
                Sc[iSeries].Values.Clear();

                //20点だけ追加
                for (int points = 0; points < 20; ++points)
                {
                    //乱数で数値を代入
                    Sc[iSeries].Values.Add((long)rnd.Next(100));
                }
            }
        }

```

#補足

###ハマったところの覚え書き

####サンプルコードでエラー
[チュートリアル](https://lvcharts.net/App/examples/v1/uwp/Basic%20Line%20Chart)のXAMLの書き方に倣ってコードを書いてると、エラーが発生。

※いずれも、MainPage.csに直接、軸や凡例の指定を書いて、エラーを回避しました。

- 軸の指定
![err1.png](https://qiita-image-store.s3.amazonaws.com/0/145581/f6de3428-9cc1-8315-5b78-44a425f3cdb9.png)

- 凡例の指定
![err2.png](https://qiita-image-store.s3.amazonaws.com/0/145581/90b836c2-aca0-4bbc-9db7-7f96e1a98469.png)

####必ずクリア
デフォルトで色々設定値が入ってるようなので、しっかりClearしましょう。

#####（例）
`LC_Graph.AxisX.Clear();     //デフォルトで設定されている軸をクリア`