Chart コントロールを利用して ASP.NET Webアプリでグラフを表示する
ASP.NET WebアプリでChart コントロールを利用してグラフを表示するコードを紹介します。
プログラム
UI
ASP.NET Webアプリケーションを新規作成します。作成後Webフォームのページを開きます。
画面左の[ツールボックス]ウィンドウから[データ]カテゴリの[Chart]コントロールを選択して、Webフォームにドラッグ＆ドロップします。
Webフォームの Form タグ内にドロップします。Chart コントロールのXMLが生成されます。(ソース表示画面でなく、デザイン画面にドロップしてもコントロールは配置できます。)
デザイン画面に切り替えるとChartコントロールが配置され、グラフのサンプルが表示されています。
テスト実行
Chartコントロールを配置のみをした状態でプロジェクトを実行します。Webブラウザが起動しページが表示されますが、画面には何も表示されません。
コード
グラフを表示するためのコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SimpleChart
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Series.Add("series1");
Chart1.Series["series1"].XValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Int32;
Chart1.Series["series1"].Points.AddXY(1, 55);
Chart1.Series["series1"].Points.AddXY(2, 72);
Chart1.Series["series1"].Points.AddXY(3, 80);
Chart1.Series["series1"].Points.AddXY(4, 49);
Chart1.Series["series1"].Points.AddXY(5, 76);
}
}
}
解説
グラフを表示するための系列を作成します。系列の作成は"Series"プロパティの"Add"メソッドを呼び出します。Addメソッドの引数に系列名を与えます。
Chart1.Series.Add("series1");
グラフのX軸の型を指定します。今回は整数値にします。
Chart1.Series["series1"].XValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Int32;
グラフの値を入力します。X軸の型は整数値なので、第一引数に整数値を、第二引数に値の数値を入力します。
Chart1.Series["series1"].Points.AddXY(1, 55);
Chart1.Series["series1"].Points.AddXY(2, 72);
Chart1.Series["series1"].Points.AddXY(3, 80);
Chart1.Series["series1"].Points.AddXY(4, 49);
Chart1.Series["series1"].Points.AddXY(5, 76);
実行結果
プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。画面にグラフが表示されました。
参考：軸の型を他の型にした場合の実行結果
軸の型をString型にした場合の実行結果です。
コード
XValueType を System.Web.UI.DataVisualization.Charting.ChartValueType.String に設定した場合のコードと実行結果です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SimpleChart
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Series.Add("series1");
Chart1.Series["series1"].XValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.String;
Chart1.Series["series1"].Points.AddXY("ぺんた", 59);
Chart1.Series["series1"].Points.AddXY("あでりー", 71);
Chart1.Series["series1"].Points.AddXY("じぇんつー", 48);
Chart1.Series["series1"].Points.AddXY("ろっくほっぱー", 65);
Chart1.Series["series1"].Points.AddXY("きんぐ", 88);
}
}
}
実行結果
実行結果は下図となります。
参考
Chartコントロールで出力されるグラフは画像での表示となります。(HTML Canvasなどの描画処理で表示されるグラフではありません。)
HTMLのコードを確認するとグラフ部分は<img>タグで表現されています。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="71P2g0qYTUALXDgyVgg4NoFk88HlELT50Z53j4XB3hIr8mK0W0hKQivX285DPMXHrQalrMpKM4YmGSe7RF6XcYgBnV9zpIGwdzVobuhRWCk=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
<div>
<img id="Chart1" src="/ChartImg.axd?i=chart_bdbf79c832b34a5593d8fc7c7243c6c8_0.png&g=13d7352fd33543c6a01ead5e0441f443"
alt="" style="height:300px;width:300px;border-width:0px;" />
</div>
</form>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
