FC2ブログ

くわぽんのつれづれ日記

思うが侭、つれづれに書いています。ほぼ、毎日更新中!!

サンプルコード

Silverlightで棒グラフを書くためのサンプルコードです。

サンプルの前提条件は、
Silverlight4_Tools.exe

Silverlight_4_Toolkit_April_2010.msi
をインストール済みの
Visual Studio 2010 Professional
とさせていただきます。

まず、VisualStudioで”ChartTest”というSilverlightアプリケーションプロジェクトを作ります。
Silverlightのバージョンを4にするのを忘れないでください。

MainPage.xamlは以下のような内容になります。
----------
<UserControl x:Class="ChartTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

<Grid x:Name="LayoutRoot" Background="White">
<toolkit:Chart HorizontalAlignment="Left" Margin="12,12,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Height="276" Width="376">
<toolkit:ColumnSeries>
</toolkit:ColumnSeries>
</toolkit:Chart>
</Grid>
</UserControl>
----------
ツールボックスからChartControlを持ってくると余計な行や値が入りますが、すべて消してください。

MainPage.xaml.csには、まず、データの構造体をオブジェクトとして宣言します。
----------
#region グラフデータの宣言
public List<SelData> TestData { get; set; } //試験用のデータ構造をListとして宣言します。
public class SelData
{
public string dataname { get; set; }
public int datavalue { get; set; }
}
#endregion
----------

これで、ColumnSeries用のデータ構造を宣言できました。
この中に、適当にデータを格納して”chart1”に渡してみます。
System.Windows.Controls.DataVisualization.Charting;を参照宣言するのを忘れないようにしてください。
----------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;


namespace ChartTest
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
TestData=new List<SelData>();
for (int i = 0; i < 12; i++)
{
TestData.Add(new SelData());
}
TestData[0].dataname = "4月";
TestData[0].datavalue = 100;
TestData[1].dataname = "5月";
TestData[1].datavalue = 20;
TestData[2].dataname = "6月";
TestData[2].datavalue = 50;
TestData[3].dataname = "7月";
TestData[3].datavalue = 30;
TestData[4].dataname = "8月";
TestData[4].datavalue = 60;
TestData[5].dataname = "9月";
TestData[5].datavalue = 90;
TestData[6].dataname = "10月";
TestData[6].datavalue = 120;
TestData[7].dataname = "11月";
TestData[7].datavalue = 110;
TestData[8].dataname = "12月";
TestData[8].datavalue = 50;
TestData[9].dataname = "1月";
TestData[9].datavalue = 10;
TestData[10].dataname = "2月";
TestData[10].datavalue = 60;
TestData[11].dataname = "3月";
TestData[11].datavalue = 70;
(chart1.Series[0] as ColumnSeries).ItemsSource = TestData;
(chart1.Series[0] as ColumnSeries).Refresh();
}
#region グラフデータの宣言
public List<SelData> TestData { get; set; } //試験用のデータ構造をListとして宣言します。
public class SelData
{
public string dataname { get; set; }
public int datavalue { get; set; }
}
#endregion

}
}
----------

最後に、XAMLのchart1で、DependentValuePathとIndependentValuePathを宣言します。
これは、「グラフのデータ宣言」で宣言した”datavalue”と”dataneme”です。
ついでに、表示範囲を広げています。
----------
<UserControl x:Class="ChartTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="900" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

<Grid x:Name="LayoutRoot" Background="White">
<toolkit:Chart HorizontalAlignment="Left" Margin="12,12,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Height="576" Width="876">
<toolkit:ColumnSeries ItemsSource="{Binding TestData}" DependentValuePath="datavalue" IndependentValuePath="dataname">
</toolkit:ColumnSeries>
</toolkit:Chart>
</Grid>
</UserControl>
----------

Refreshは、チャートの種類によっては使えません。
どんな場面でも使える方法としては、
(chart1.Series[0] as ColumnSeries).Refresh();
に代わりに、
(chart1.Series[0] as ColumnSeries).ItemsSource = null;
(chart1.Series[0] as ColumnSeries).ItemsSource = TestData;
と書く方法もあります。
スポンサーサイト



テーマ:プログラミング - ジャンル:コンピュータ

  1. 2011/02/07(月) 22:19:05|
  2. 未分類
  3. | トラックバック:0
  4. | コメント:0
<<Windows Home Server 2011 RC を今夜からインストール開始!! | ホーム | この土日でできたこと・・・>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kuwapon.blog60.fc2.com/tb.php/1090-0fdc177f
この記事にトラックバックする(FC2ブログユーザー)

アクセスカウンター

オンラインカウンター

現在の閲覧者数:

プロフィール

くわぽん

Author:くわぽん
くわぽんのブログへようこそ!
気が向いたらコメントください♪

アフィリエイトバナー

広告の中で説明だけ読んでよさそうなものを出しています。
よかったらクリックしてね。
詐欺みたいのがあったら教えてね。

ブロとも申請フォーム

この人とブロともになる

リンク

このブログをリンクに追加する

カテゴリ

D4でモバイル生活 (29)
風来人観察日記 (66)
ゲーマーの独り言 (183)
つれづれ日記 (114)
音楽を持ち歩く (47)
Windows Home Server 管理日記 (95)
Dolce Gustoとの日がな一日 (22)
お篭り部屋構築日記+愚痴 (53)
ウツ(鬱) (99)
未分類 (799)
So-Netの名残 (4)
DNNを使いましょう (26)
コカコーラとのお付き合い (9)
RPGを語る (4)
テレビにパソコン生活 (3)
”使えるねっと”は使える? (12)
Android日記 (4)
再生した地球にて (29)
セキュリティBlog (19)
Cuckoo SandBox (5)

検索フォーム

月別アーカイブ

FC2ブログランキング

FC2Blog Ranking

QRコード

QRコード