チュートリアル: グラフからデータベースへのデータ バインド (グラフ コントロール)
このチュートリアルでは、データベースのデータをバインドする方法に加えて、ツールヒントの使用方法とグラフ内の軸ラベルを調整する方法について説明します。
このチュートリアルを実行するには、SQL Server (SQL Server 2008 Express など) のインスタンスに、AdventureWorks2008 サンプル OLTP データベースをインストールする必要があります。サンプル データベースをインストールする場合は、www.codeplex.com を参照してください。
データベースからのデータ バインド
まずデータ ソース コントロールからグラフ コントロールにデータをバインドし、次にデータ ソースの特定の列を系列の X 値と Y 値にバインドします。
データベースからグラフへデータをバインドするには
Windows フォームまたは Web アプリケーションのデザイン サーフェイスで、ツールボックスからグラフ コントロールをドラッグ アンド ドロップします。
グラフ コントロールのプロパティ ウィンドウの [データ] カテゴリで、DataSourceID プロパティ (ASP.NET) または DataSource プロパティ (Windows フォーム) をクリックし、ドロップダウン矢印をクリックし、[<新しいデータ ソース>] をクリックします。
[データソースの種類を選択] ページで、[データベース] をクリックし、[次へ] をクリックします。
[データ接続の選択] ページで [新しい接続] をクリックします。
[接続の追加] ダイアログ ボックスで、[データ ソース] フィールドが [Microsoft SQL Server (SqlClient)] に設定されていることを確認し、AdventureWorks2008 データベースのサーバー名とデータベース名を指定します。
[テスト接続] をクリックし、[OK] をクリックします。
[次へ] を 2 回クリックします。
[Select ステートメントの構成] ページで、[カスタム SQL ステートメントを指定する] をクリックし、[次へ] をクリックします。
[SQL ステートメント] フィールドに次のクエリをコピーして貼り付け、[次へ] をクリックします。
select LastName, SalesYTD, SalesLastYear from HumanResources.Employee as e inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID[クエリのテスト] をクリックし、[完了] をクリックします。
クエリで指定したデータ列を含むグラフ コントロールに SQL データ ソースがバインドされます。
グラフの X 値と Y 値にデータをバインドするには
グラフ コントロールの Series コレクション エディターを開きます。
既定の系列のプロパティ ウィンドウの [データ ソース] カテゴリで、XvalueMember プロパティをクリックし、ドロップダウン矢印をクリックして、[LastName] をクリックします。
[XvalueMember] ボックスの一覧にはグラフ コントロールにバインドされたデータ ソースから返されるすべての列が表示されます。
YvalueMembers プロパティをクリックし、ドロップダウン矢印をクリックして、[SalesYTD] をクリックします。
既定の系列の X 値が LastName 列にバインドされ、既定の系列の最初の Y 値が SalesYTD 列にバインドされます。
Series コレクション エディターで、[追加] をクリックし、同様にして新しい系列に次の値を設定します。
プロパティ
値
XValueMember
LastName
YValueMembers
SalesLastYear
[OK] をクリックします。
アプリケーションを実行します。
2 つの系列に、データ ソースから自動的に挿入されたデータ ポイントが表示されます。グラフにはすべての従業員が表示されるとは限りません。これは、読みやすいようにグラフ コントロールでラベルが自動的に調整されるためです。
軸ラベルとタイトルの調整
グラフ領域の軸のラベルとタイトルをカスタマイズするには、ChartArea コレクション エディターの Axes コレクション プロパティを使用します。
軸ラベルを調整してタイトルを追加するには
グラフ コントロールの ChartArea コレクション エディターを開きます。
既定のグラフ領域のプロパティ ウィンドウの [軸] カテゴリで、Axes コレクション プロパティをクリックし、省略記号ボタン ([…]) をクリックします。Axis コレクション エディターが開きます。
Axes コレクション (Axis 配列) には、グラフ領域の軸が含まれます。
主軸の X 軸のプロパティ ウィンドウの [ラベル] カテゴリで、LabelStyle プロパティを展開し、Interval プロパティを 1 に設定し、IntervalStyle プロパティが設定されていないことを確認します。
これにより、グラフ コントロールに各データ ポイントのラベルが表示されるようになります。
[タイトル] カテゴリで、Title プロパティを "Employee" に設定します。
主軸の Y 軸のプロパティ ウィンドウの [タイトル] カテゴリで、Title プロパティを "Sales" に設定します。
[OK] を 2 回クリックします。
アプリケーションを実行します。
グラフ コントロールで、各従業員が主軸の X 軸上に 90 度に自動的に配置されて表示されます。
系列へのツールヒントの追加
データ ポイントを判別しやすいように、2 つの系列にツールヒントを追加します。
系列にツールヒントを追加するには
グラフ コントロールの Series コレクション エディターを再度開きます。
最初の系列を選択します。
最初の系列のプロパティ ウィンドウの [マップ領域] カテゴリで、Tooltip プロパティを "#VALX: #VALsales this year." に設定します。
Tooltip プロパティの値フィールドで省略記号ボタンをクリックすると、文字列キーワード エディターが開きます。このダイアログ ボックスを使用すると、キーワードでツールヒント文字列を作成できます。
最初の系列のプロパティ ウィンドウの [マップ領域] カテゴリで、Tooltip プロパティを "#VALX: #VALsales last year." に設定します。
[OK] をクリックします。
アプリケーションを実行し、各データ ポイントの上にカーソルを置いてツールヒントを表示します。
次の手順
ここでは、データベースのデータをバインドする方法に加えて、ツールヒントの使用方法とグラフ内の軸ラベルを調整する方法について学習しました。グラフをカスタマイズするイベントの使用方法を学習するには、「チュートリアル: イベントによるグラフのカスタマイズ」を参照してください。
関連項目
参照
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting