2013年12月26日
WPF Chart: X軸、Y軸のタイトル指定と軸の範囲指定
前回のXAMLに手を加えて、以下の2つのカスタマイズをしてみました。
・X軸とY軸のタイトル表示
・Y軸の最小値、最大値を指定
このチャートでは、数値ではなく、ブラウザの種類をX軸にとっていますので、CategoryAxis でタイトルを指定しています。Y軸は、LinearAxis を使いタイトルと最小値、最大値を指定しています。
実行時のスクリーンショットです。

C#のコードは、前回と同じなので省略します。
・X軸とY軸のタイトル表示
・Y軸の最小値、最大値を指定
このチャートでは、数値ではなく、ブラウザの種類をX軸にとっていますので、CategoryAxis でタイトルを指定しています。Y軸は、LinearAxis を使いタイトルと最小値、最大値を指定しています。
<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="ChartSample2.MainWindow" xmlns:my="clr-namespace:ChartSample2" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <my:MyData x:Key="myData" /> </Window.Resources> <Grid> <chartingToolkit:Chart HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Title="ブラウザ利用割合" DataContext="{Binding Source={StaticResource myData}}"> <chartingToolkit:Chart.LegendStyle> <Style TargetType="Control"> <Setter Property="Width" Value="10" /> <Setter Property="Opacity" Value="0" /> </Style> </chartingToolkit:Chart.LegendStyle> <chartingToolkit:ColumnSeries DependentValuePath="Rate" IndependentValuePath="Browser" ItemsSource="{Binding Items}" > </chartingToolkit:ColumnSeries> <chartingToolkit:Chart.Axes> <chartingToolkit:CategoryAxis Orientation="X" Title="ブラウザ" /> <chartingToolkit:LinearAxis Orientation="Y" Title="割合" Interval="20" Minimum="0" Maximum="80" /> </chartingToolkit:Chart.Axes> </chartingToolkit:Chart> </Grid> </Window>
実行時のスクリーンショットです。

C#のコードは、前回と同じなので省略します。
2013年12月21日
2013年12月19日
WPFChart: 凡例表示を消す
Chartクラスには、凡例のスタイルを指定する LegendStyleプロパティがあります。
このLegendStyleでスタイルを変更することで、凡例表示を消す事ができます。

上に示したチャートでは、グラフの右側が詰まりすぎないように、Widthプロパティを10にし、Opacityプロパティを 0 (完全透過)にしています。
そのXAMLを以下に示します。
C#のコードは以下の通りです。
このLegendStyleでスタイルを変更することで、凡例表示を消す事ができます。

上に示したチャートでは、グラフの右側が詰まりすぎないように、Widthプロパティを10にし、Opacityプロパティを 0 (完全透過)にしています。
その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="ChartSample2.MainWindow" xmlns:my="clr-namespace:ChartSample2" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <my:MyData x:Key="myData" /> </Window.Resources> <Grid> <chartingToolkit:Chart HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Title="ブラウザ利用割合" DataContext="{Binding Source={StaticResource myData}}"> <chartingToolkit:Chart.LegendStyle> <Style TargetType="Control"> <Setter Property="Width" Value="10" /> <Setter Property="Opacity" Value="0" /> </Style> </chartingToolkit:Chart.LegendStyle> <chartingToolkit:ColumnSeries DependentValuePath="Rate" IndependentValuePath="Browser" ItemsSource="{Binding Items}" > </chartingToolkit:ColumnSeries> </chartingToolkit:Chart> </Grid> </Window>
C#のコードは以下の通りです。
using System.Collections.Generic; using System.Windows; namespace ChartSample2 { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } } public class MyData { public MyData() { Items = new List<MyItem> { new MyItem { Rate=56.6, Browser="IE" }, new MyItem { Rate=18.3, Browser="Firefox" }, new MyItem { Rate=17.8, Browser="Chrome" }, new MyItem { Rate=5.4, Browser="Safari" }, new MyItem { Rate=1.9, Browser="Other" }, }; } public List<MyItem> Items { get; set; } } public class MyItem { public double Rate { get; set; } public string Browser { get; set; } } }
2013年12月11日
WPF Chart: バブルチャート (Bubble Chart)
バブルチャートを表示するには、BubbleSeriesコンポーネントを使います。
まずは、チャートに表示するデータの定義から。
ここでは、X軸に、Hourを、Y軸に Japaneseを そしてArithmeticをバルーンのサイズに 割り当てることとします。
Hourは家庭での学習時間、Japaneseは国語の点数、Arithmeticは数学の点数という設定です。
データそのものは、僕のでっちあげなので、意味はありません
XAMLを示します。
これで次のようなバブルチャートが表示されます。

まずは、チャートに表示するデータの定義から。
public class MyData { public int Hour { get; set; } public int Japanese { get; set; } public int Arithmetic { get; set; } } public class MyDataList { public List<MyData> Items { get; set; } public MyDataList() { Items = new List<MyData> { new MyData { Hour=25, Japanese=95, Arithmetic=65 }, new MyData { Hour=22, Japanese=70, Arithmetic=50 }, new MyData { Hour=18, Japanese=85, Arithmetic=95 }, new MyData { Hour=14, Japanese=60, Arithmetic=85 }, new MyData { Hour=10, Japanese=80, Arithmetic=60 }, new MyData { Hour=8, Japanese=60, Arithmetic=50 }, new MyData { Hour=4, Japanese=50, Arithmetic=40 }, }; } }
ここでは、X軸に、Hourを、Y軸に Japaneseを そしてArithmeticをバルーンのサイズに 割り当てることとします。
Hourは家庭での学習時間、Japaneseは国語の点数、Arithmeticは数学の点数という設定です。
データそのものは、僕のでっちあげなので、意味はありません
XAMLを示します。
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:my="clr-namespace:BubbleChartSample" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="BubbleChartSample.MainWindow" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <my:MyDataList x:Key="myDataList"/> </Window.Resources> <Grid > <chartingToolkit:Chart DataContext="{Binding Mode=OneWay, Source={StaticResource myDataList}}"> <chartingToolkit:BubbleSeries ItemsSource="{Binding Items}" DependentValuePath="Japanese" IndependentValuePath="Hour" SizeValuePath="Arithmetic" /> </chartingToolkit:Chart> </Grid> </Window>
これで次のようなバブルチャートが表示されます。

2013年12月04日
WPF Chart: 散布図 (ScatterChart)
散布図とは、あるデータが持つ2つの属性(項目)を横軸と縦軸にとり、それぞれの値をプロットした図のことです。
これで2つの項目間の関連性を調べることができます。
ScatterSeries を使うとこの散布図を描くことができます。
ScatterSeriesを使う以外は、BarSeriesとかと同じ使い方です。
まずは、チャートに表示するデータの定義。数学と、物理の点数のつもり。
XAMLです。
実行すると、以下のような散布図が表示されます。

これで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>
実行すると、以下のような散布図が表示されます。
