ここでは、今のところなかなか他では書いていないWPFでのグラフの表示について書いてあります。使うものはTookitのChartコントロールです。ダウンロードは以下のリンクを参照してください。
コードで動的に作成する方法はこちらです。
WPF ToolkitのDownloadサイト http://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29117
Windows1.xaml
<window x:class="MSChartProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
title="Window1" height="523" width="566" xmlns:chartingtoolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" loaded="Window_Loaded">
<dockpanel>
<chartingtoolkit:chart margin="0,0,0,0" name="chart1" dockpanel.dock="Top" height="374" width="477">
<chartingtoolkit:chart.axes>
<chartingtoolkit:linearaxis borderbrush="AliceBlue" borderthickness="1" location="Left" name="MainAxis" orientation="Y" serieshost="{x:Null}" showgridlines="True" title="金額">
</chartingtoolkit:linearaxis>
<chartingtoolkit:linearaxis serieshost="{x:Null}" location="Right" name="SubAxis" orientation="Y" title="数量" showgridlines="True" minimum="0" maximum="100" interval="20" />
</chartingtoolkit:chart.axes>
<chartingtoolkit:columnseries title="売上金" itemssource="{Binding}" independentvaluepath="OrderID" dependentvaluepath="Proceeds">
</chartingtoolkit:columnseries>
<chartingtoolkit:lineseries title="売上個数" itemssource="{Binding}" independentvaluepath="OrderID" dependentvaluepath="Quantity" />
</chartingtoolkit:chart>
</dockpanel>
</window>
C#
Windows1.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Data;
using System.Data.SqlClient;
using System.Windows.Controls.DataVisualization.Charting;
namespace MSChartProject
{
/// <summary>
/// Window1.xaml の相互作用ロジック
/// </summary>
public partial class Window1 : Window
{
DataTable dt = new DataTable();
SqlDataAdapter sda = new SqlDataAdapter();
public Window1()
{
InitializeComponent();
}
public void ShowChart()
{
//Northwindからデータを取得する
SqlConnectionStringBuilder bldr = new SqlConnectionStringBuilder();
bldr.DataSource = ".\\SQLExpress";
bldr.InitialCatalog = "Northwind";
bldr.IntegratedSecurity = true;
using (SqlConnection conn = new SqlConnection(bldr.ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = conn;
cmd.CommandText = "SELECT OrderID,SUM(Quantity) AS Quantity,SUM(UnitPrice * Quantity) AS Proceeds FROM [Order Details] WHERE OrderID <= 10250 GROUP BY OrderID ORDER BY OrderID";
this.sda.SelectCommand = cmd;
this.sda.Fill(this.dt);
}
}
//Toolkitのチャートに2つのグラフを表示するときに、Y軸の目盛を2つ使用したい時のやり方
//棒グラフの目盛を設定する
((ColumnSeries)this.chart1.Series[0]).DependentRangeAxis = this.chart1.Axes[0] as IRangeAxis;
//折れ線グラフの目盛を設定する
((LineSeries)this.chart1.Series[1]).DependentRangeAxis = this.chart1.Axes[1] as IRangeAxis;
//データソースの設定
this.chart1.DataContext = dt;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
ShowChart();
}
}
}
VB.NET
Windows1.xaml.vb
Imports System.Data.SqlClient
Imports System.Data
Imports System.Windows.Controls.DataVisualization.Charting
Class Window1
Dim dt As DataTable = New DataTable()
Dim sda As SqlDataAdapter = New SqlDataAdapter()
Public Sub ShowChart()
'Northwindからデータを取得する
Dim bldr As SqlConnectionStringBuilder = New SqlConnectionStringBuilder()
bldr.DataSource = "."
bldr.InitialCatalog = "Northwind"
bldr.IntegratedSecurity = True
Using conn As SqlConnection = New SqlConnection(bldr.ConnectionString)
Using cmd As SqlCommand = New SqlCommand()
cmd.Connection = conn
cmd.CommandText = "SELECT OrderID,SUM(Quantity) AS Quantity,SUM(UnitPrice * Quantity) AS Proceeds FROM [Order Details] WHERE OrderID <= 10250 GROUP BY OrderID ORDER BY OrderID"
Me.sda.SelectCommand = cmd
Me.sda.Fill(Me.dt)
End Using
End Using
'Toolkitのチャートに2つのグラフを表示するときに、Y軸の目盛を2つ使用したい時のやり方
'棒グラフの目盛を設定する
CType(Me.chart1.Series(0), ColumnSeries).DependentRangeAxis = CType(Me.chart1.Axes(0), IRangeAxis)
'折れ線グラフの目盛を設定する
CType(Me.chart1.Series(1), LineSeries).DependentRangeAxis = CType(Me.chart1.Axes(1), IRangeAxis)
'データソースの設定
Me.chart1.DataContext = Me.dt
End Sub
Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
ShowChart()
End Sub
End Class
