朧の.Netの足跡
問合せ先:support@oborodukiyo.info サイト内検索はこちら
WPF ToolkitのChart(グラフ)を使ってみる





ここでは、今のところなかなか他では書いていない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








良いやや良い普通やや悪い悪い
1 0 4 0 6

投稿日時評価コメント