Visual Studio 2010 の 優れた機能 （５） チャートコントロール
（今回の記事では SQL データベースを使用します。もしもデータベースが用意されていない場合は、前回の記事を参考にしてください。）
さて、今回はチャートコントロールの紹介です。
この機能はどちらかといえば .NET Framework 4 の新機能なのですが、棒グラフや円グラフなどを直接描写するためのコントロールが追加されました。
例えば以下のような棒グラフをWeb page上に表示させるには、これまででしたらそれなりの工夫が必要でした。
ところが Visual Studio 2010 と .NET Framework 4 の組み合わせにより、このようなグラフ付きの Web page もほとんどコーディングなしで作成することができます。
それでは早速作ってみましょう。
まず Visual Studio 2010 を起動し、あらかじめ何か SQL データベースが Server Explorer 上に表示されている状態にします。（前回の記事から続けて操作されている場合には、既にデータベースが表示されているはずです。）
そして、新規プロジェクトの作成から ASP.NET Empty Web Application を選択し、空のASP.NET プロジェクトを作成します。
すると Solution Explorer 上に全くWeb pageを持たないプロジェクトが表示されるのが確認できます。
それではまずこのプロジェクトに、ひとつ Web page を追加します。
Solution Explorer 上のプロジェクト名（上のPictureの例では、 WebApplication3 になっています）を右クリックし、Add を選択、続けて New Item... を選択します。
ここでは 標準的なASP.NETの Web page を作成したいので、 Web Form を選択して OK をクリックします。
すると以下のような、Bodyの中に特に表示内容のない .aspx の Web page が作成されます。
このページ上にこれからチャートコントロールを追加し、前回用意したデータベースをバインドさせて、グラフを表示するような Web page を作るわけですが、基本的には一切コーディングというものをする必要がありません。
それでは、チャートコントロールをドラッグ＆ドロップで追加するために、まずこのWeb page の表示形式を Source から Design に切り替えましょう。
画面の下の方に、「Design」「Split」「Source」のタブが並んでいるので、この中の「Design」をクリックします。
すると画面は先ほどのようなHTML/ASPXのソース表示から、デザイン表示へと切り替わります。
もっとも、現状何も表示するものがないので、BODYタブの位置を示す枠以外は特に何も表示されていません。
さてこの何もないページに、チャートコントロールを貼り付けます。
画面左側に Toolbox があるのでこれを開き、この中の Dataタブの中に Chart というコントロールがあるので、これをドラッグ＆ドロップで Web pageの Body の中に配置します。
するとチャートコントロールが配置され、その右上に小さな ＜ が書かれたボタンがあり、その横に Chart Tasks という項目が表示されています。
この中の Choose Data Source のところに、前回作成した SQL データベースを設定することになります。
とりあえず Choose Data Source の右にあるドロップダウンを開いて、 <New data source...> を選択します。
すると Choose a Data Source Type というダイアログが表示されるので、 Database を選択して次へ進みます。
Choose Your Data Connection のダイアログでは、ドロップダウンを開くと、現在この VS の Server Explorer 上に表示されているデータベースが表示されるはずです。
ここでは前回作成したデータベースである testdb1.dbo を選択して進みます。
この先は特に変更する必要はないので、ダイアログの最後の画面まで進みます。
最後の画面は Test Query です。
正しく自分のデータベースが クエリできるかどうか確認することができます。
右下の Test Query ボタンを押すと、テーブルをクエリした結果がプレビューできます。
正しく目的のデータベースの中の目的のテーブルがクエリできていることが確認できたら、このダイアログを閉じます。
すると、以下のように Series1 Data Members という項目が表示され、 X軸（横軸）・Y軸（縦軸）に対応する項目が何なのかを設定できるようになります。
ここではX軸に month を、 Y軸に sale を設定してみます。
また、好みに応じて Chart Type なども変更して、見栄えを変更してもいいと思います。
ここまでほとんど何もコーディングしていませんが、これで一応テーブルの内容をグラフ表示する Web page ができました。
F5 を押して実行してみましょう。
いかがでしょうか。
このような便利な機能が、最初から用意されているというのは非常に便利なことだと思います。
なお、グラフではなくテーブル上のデータをそのまま（文字や数値のまま）表示させるには、これは.NET Frameworkの最初のバージョンから存在するコントロールだと思いますが、グリッドビュー コントロールを使用します。
ツールボックス中の Data の中の GridView をドラッグ＆ドロップして、 Choose Data Source のところに今チャートコントロールで実践したことと同じ方法でテーブルを選択し（すでにチャートコントロールを設定している場合には、ドロップダウンで SqlDataSource1 という先に作成したデータソースを選択するだけです）、もしも見栄えをよくしたいようであれば Auto Format... を選択して気に入った表示形式を選択すれば、もう表示できます。
また、タイトルや説明文などを追加したいようであれば、追加したい場所をクリックして直接タイプして書き込むこともできますし、Source表示に戻してHTMLタグなどで書き込むこともできます。
これらの使いやすいコントロールを使って、ぜひ有益な ASP.NET のWeb pageを作成していただけたら幸いです。