2012年12月13日木曜日

WPF Toolkit のChart で折れ線グラフ


WPF Toolkit の Chart クラスを使うと、簡単にグラフを描画できます。
折れ線グラフは、LineSeries クラスです。
左のDataGridの各行とグラフの各座標をバインドしています。
DataGrid の値を編集すると、アニメーションしながらグラフが更新されます。



座標(x,y)=(3,4)を追加したところ。


MainWindow.xaml

<Window x:Class="Chart2.MainWindow"
        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"
        Height="300" Width="500">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="130"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <DataGrid Grid.Column="0" Name="dataGrid1" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="X" Width="60" Binding="{Binding X}"/>
                <DataGridTextColumn Header="Y" Width="60" Binding="{Binding Y}"/>
            </DataGrid.Columns>
        </DataGrid>
        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="4" />
        <chartingToolkit:Chart Grid.Column="2" >
            <chartingToolkit:Chart.Series>
                <chartingToolkit:LineSeries Name="lineSeries1" IndependentValuePath="X" DependentValuePath="Y"/>
            </chartingToolkit:Chart.Series>
        </chartingToolkit:Chart>
    </Grid>
</Window>

MainWindow.xaml

using System.Collections.ObjectModel;
using System.Windows;

namespace Chart2
{
    public partial class MainWindow Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ObservableCollection<MyPoint> points = new ObservableCollection<MyPoint>();
            points.Add(new MyPoint(0, 0));
            points.Add(new MyPoint(1, 2));
            points.Add(new MyPoint(2, 1));
            this.dataGrid1.ItemsSource = points;
            this.lineSeries1.ItemsSource = points;
        }
    }
}

MyPoint.cs

namespace Chart2
{
    public class MyPoint
    {
        public double X { setget; }
        public double Y { setget; }

        public MyPoint()
        {
            this.X = 0;
            this.Y = 0;
        }

        public MyPoint(double x, double y)
        {
            this.X = x;
            this.Y = y;
        }
    }
}

1 件のコメント:

  1. JBET Casino and Resort Announces $3,750 Million Expansion
    JBET 광양 출장마사지 Casino and Resort is one of the first casinos in Colorado, with 논산 출장샵 more 성남 출장안마 than 광주광역 출장마사지 a dozen restaurants, retail, a 양주 출장샵 hotel, and a casino.

    返信削除