[C#] Chart コントロールを利用して ASP.NET Webアプリでグラフを表示する
このページのタグ:[C#] [ASP.NET] [Chartコントロール]
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>

登録日 :2016-07-21    最終更新日 :2016-08-16
このページのタグ:[C#] [ASP.NET] [Chartコントロール]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)