編集履歴

質問編集履歴

「詳しくは、最下部の「追記」項目をお読みください。「該当のソースコード」項目は読み飛ばしていただいてもかまいません。」を文章内に追記

2018/03/29 17:05

投稿

myora

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,6 +16,10 @@
+詳しくは、最下部の「追記」項目をお読みください。「該当のソースコード」項目は読み飛ばしていただいてもかまいません。
 ### 該当のソースコード
 こちらがソースコードです。このアプリは、ボタンを押下すると、500点からなる折れ線グラフを描画･更新します。描画する500点は起動時に乱数によって決定します。

Itemクラスの修正

2018/03/29 17:05

投稿

myora

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -274,18 +274,74 @@
 {
-    public class Item : INotifyPropertyChanged
+     public class Item : INotifyPropertyChanged
     {
-        public double Key { get; set; }
-        public double Value { get; set; }
         public event PropertyChangedEventHandler PropertyChanged;
+        private void RaisePropertyChanged([CallerMemberName]string propertyName = null)
+        {
+            if (PropertyChanged != null)
+                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
+        }
+        private double x;
+        private double y;
+        public double Key {
+            get { return x; }
+            set {
+                if (value != x)
+                {
+                    x = value;
+                    RaisePropertyChanged();
+                }
+            }
+        }
+        public double Value
+        {
+            get { return y; }
+            set
+            {
+                if (value != y)
+                {
+                    y = value;
+                    RaisePropertyChanged();
+                }
+            }
+        }
     }

メモリリークする、処理が遅くなる、についての詳細な測定結果について「追記」に記載しました

2018/03/29 15:51

投稿

myora

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -193,3 +193,261 @@
 Debug版での実行に基づき、メモリや処理速度を判断しています。
+### 追記
+メモリリークする、処理が遅くなる、についての詳細な部分について記載します。
+まず、検証するソースコードですが、今後の実用性の観点から以下のようなアプリに変更しました。
+アプリ概要： 「グラフ生成」と「グラフクリア」の二つのボタンが配置されている。「グラフ生成」ボタンを押下すると、10点分の折れ線グラフが30個描画される。次に、「グラフクリア」ボタンを押下すると、描画されているグラフを消す。
+「グラフ生成」ボタンを押下後のイメージ
+![グラフの描画時](febe0bf33c3ee01171f317c0b7b1e362.png)
+ソースコード
+```Xaml
+<Page
+    x:Class="ChartTest.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:ChartTest"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
+    mc:Ignorable="d">
+    <Grid x:Name="Grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <Charting:Chart Name="LineChart01" Margin="33,154,49,34">
+        </Charting:Chart>
+        <Button Content="グラフ生成" HorizontalAlignment="Left" Height="114" Margin="108,21,0,0" VerticalAlignment="Top" Width="496" Click="Button_Create_Click"/>
+        <Button Content="グラフクリア" HorizontalAlignment="Left" Height="114" Margin="749,21,0,0" VerticalAlignment="Top" Width="496" Click="Button_Clear_Click"/>
+    </Grid>
+</Page>
+```
+```C#
+using WinRTXamlToolkit.Controls.DataVisualization.Charting;
+namespace ChartTest
+{
+    public class Item : INotifyPropertyChanged
+    {
+        public double Key { get; set; }
+        public double Value { get; set; }
+        public event PropertyChangedEventHandler PropertyChanged;
+    }
+    public sealed partial class MainPage : Page
+    {
+        List<ObservableCollection<Item>> itemsList;
+        public MainPage()
+        {
+            this.InitializeComponent();
+            // 描画するグラフのList生成
+            itemsList = new List<ObservableCollection<Item>>();
+            Random rnd = new System.Random();
+　　　　　　 // 30個のグラフを表示
+            for (int j = 0; j < 30; j++)
+            {
+                // それぞれのグラフに10点の値を入れる。
+                ObservableCollection<Item> items = new ObservableCollection<Item>();
+                for (int i = 0; i < 10; i++)
+                {
+                    items.Add(new Item { Key = i, Value = rnd.Next(0, 100) });
+                }
+                itemsList.Add(items);
+            }
+        }
+        // ボタンクリックでグラフの生成
+        private void Button_Create_Click(object sender, RoutedEventArgs e)
+        {
+            int i = 0;
+            // グラフの数だけ描画する
+            foreach (var items in itemsList)
+            {
+                // LineSeries 生成
+                LineSeries lineSeries = new LineSeries()
+                {
+                    ItemsSource = items,
+                    IndependentValuePath = "Key",
+                    DependentValuePath = "Value",
+                    Title = i
+                };
+                // SeriesにAdd
+                this.LineChart01.Series.Add(lineSeries);
+                i++;
+            }
+        }
+        // ボタンクリックでグラフのクリア
+        private void Button_Clear_Click(object sender, RoutedEventArgs e)
+        {
+            // SeriesのCollectionを初期化
+            this.LineChart01.Series.Clear();
+        }
+    }
+}
+```
+次に、グラフ描画時間とメモリの測定です。
+[1]. 本アプリをDebugモードで起動します。
+[2]. 「グラフ生成」ボタン押下 → 「グラフクリア」ボタン押下 → 「グラフ生成」ボタン押下 → ･･･
+　と繰り返します。
+[3]. この時の、各ボタンを押下してから処理が完了するまでの時間を、Debugモードの診断ツールのプロセスメモリグラフとCPUグラフの処理時間から読み取ります。
+測定結果が以下です。(1枚目がシステム起動時、2枚目が上記の[2].を5分間繰り返したときの画像です)
+赤丸の部分が、「グラフ生成」ボタンを押下してから、グラフが描画されるまでの時間で、
+青丸の部分が、「グラフクリア」ボタンを押下してから、グラフが消えるまでの時間です。
+システム起動時
+![システム起動時](8b321d0ac570583cf22a6a3a885805b0.jpeg)
+5分経過時
+![5分経過時](aeba00b91768f40dd2994342a146e0bc.jpeg)
+上記のグラフから、以下のことが言えると考えました。
+・メモリは起動時には急激に増加し、それ以降は、徐々に増加していく。
+・処理時間は、グラフ描画時間はほとんど変わらないが、グラフクリアをする時間が5分経過時には、2倍近く遅くなっている。
+とくに、処理時間が遅くなることが困っています。
+アドバイス等ありましたらよろしくお願いします。