2013年12月04日

WPF Chart: 散布図 (ScatterChart)

  
散布図とは、あるデータが持つ2つの属性(項目)を横軸と縦軸にとり、それぞれの値をプロットした図のことです。
これで2つの項目間の関連性を調べることができます。

ScatterSeries を使うとこの散布図を描くことができます。
ScatterSeriesを使う以外は、BarSeriesとかと同じ使い方です。

まずは、チャートに表示するデータの定義。数学と、物理の点数のつもり。

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Mathematics=28,Physics=30  },
                new MyItem { Mathematics=31,Physics=34  },
                new MyItem { Mathematics=35,Physics=40  },
                new MyItem { Mathematics=34,Physics=26  },
                new MyItem { Mathematics=44,Physics=50  },
                new MyItem { Mathematics=47,Physics=43  },
                new MyItem { Mathematics=48,Physics=32  },
                new MyItem { Mathematics=51,Physics=40  },
                new MyItem { Mathematics=53,Physics=54  },
                new MyItem { Mathematics=53,Physics=52  },
                new MyItem { Mathematics=54,Physics=65  },
                new MyItem { Mathematics=55,Physics=59  },
                new MyItem { Mathematics=60,Physics=49  },
                new MyItem { Mathematics=57,Physics=65  },
                new MyItem { Mathematics=63,Physics=58  },
                new MyItem { Mathematics=64,Physics=63  },
                new MyItem { Mathematics=65,Physics=70  },
                new MyItem { Mathematics=69,Physics=75  },
                new MyItem { Mathematics=70,Physics=60  },
                new MyItem { Mathematics=73,Physics=69  },
                new MyItem { Mathematics=78,Physics=78  },
                new MyItem { Mathematics=80,Physics=69  },
                new MyItem { Mathematics=80,Physics=84  },
                new MyItem { Mathematics=85,Physics=80  },
                new MyItem { Mathematics=90,Physics=90  },
                new MyItem { Mathematics=96,Physics=88  },
            };
        }
        public List<MyItem> Items { get; set; }
    }
    public class MyItem {
        public int Physics { get; set; }
        public int Mathematics { get; set; }
    }
}

XAMLです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="ScatterChartSample.MainWindow"
        xmlns:my="clr-namespace:ScatterChartSample" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart Title="散布図">
            <chartingToolkit:Chart.DataContext>
                <my:MyData/>
            </chartingToolkit:Chart.DataContext>
            <chartingToolkit:ScatterSeries 
                    ItemsSource="{Binding Items}"
                    Title="点数"
                    IndependentValuePath="Mathematics"
                    DependentValuePath="Physics" />
        </chartingToolkit:Chart>
    </Grid>
</Window>


実行すると、以下のような散布図が表示されます。

ScatterSeries



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52337152