テスターですが何か?

ホビープログラマ略してHPです

ASP.NET MVCでChartコントロールを使用する(2)

leave a comment »

前回のエントリーでASP.NET MVC3で導入されたSystem.Web.Helperに含まれているChartコントロールの機能を検証しましたが、機能不足でボツという結論になりました。そのため、ASP.NET MVCでWebFormのChartコントロールを使用する方法を調べようと思います。正直、需要がないと思っていますし(日本語でもChartコントロールの情報は少ない)、たぶんこんな変態的なことをやって情報を公開している人なんていないだろうなぁと思ってましたが、いました。世界はやっぱ広いです。以下のサイトで情報が公開されていました。

 

ASP.NET Chart Controls Without Web Forms

http://develocity.blogspot.com/2010/04/aspnet-chart-controls-without-web-forms.html

 

New asp.net charting controls – will they work with MVC (eventually)?

http://stackoverflow.com/questions/319835/new-asp-net-charting-controls-will-they-work-with-mvc-eventually#320891

 

では、ASP.NET MVCでChartコントロールを利用する方法を順をおって日本語で解説します。

(1) Web.configの編集

WebFormでChartコントロールを使用すると自動的に(?)Web.configに追加される内容を手動で追加していきます。追加する内容は以下2点です、WebFormプロジェクトからコピーしたので、これがベストの記述ではないかもしれません、とくにadd keyの部分はよくわからずコピペしています。

<appSettings>
  <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
</appSettings>

—- (中略) —-

<system.web>
  <httpHandlers>
    <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
  </httpHandlers>

(2) 参照設定の追加

Chartコントロールをが含まれているSystem.Web.DataVisualizationの参照を追加します。

image

(3) Viewの設定

Viewのグラフを描画したい部分に<img>タグを使用して記述します。これで気づくと思いますが、グラフを描画する処理はChartsControllerクラスのDailyReportChartメソッドに記述します。

<img src="/Charts/DailyReportChart" width="900" height="500" />

(4) Controllerにグラフを描画する処理を記述

ポイントは以下です、それほど難しい処理ではないと思うのでソースを読めばわかると思います。

  • usingで指定するのは「System.Web.UI.DataVisualization.Charting」(アセンブリ名と異なる)
  • Chartインスタンスを生成して、WebFormの時と同様にプロパティを設定していく。(IntelliSenseが効くので設定したいプロパティはすぐ見つかるはずです)
  • FileContentResult型で作成したグラフの画像イメージを返します。

—-

using System.Web.UI.DataVisualization.Charting;

public class ChartsController : Controller
{
    public FileContentResult DailyReportChart()
    {
        var chart = new Chart();
        chart.Width = 900;
        chart.Height = 500;
        chart.Titles.Add("時刻別節電達成率");
        chart.Legends.Add("凡例");

        chart.ChartAreas.Add("Default");

        var AxisY = chart.ChartAreas["Default"].AxisY;
        AxisY.Title = "節電率(%)";
        AxisY.Minimum = -30;
        AxisY.Maximum = 50;
        AxisY.Interval = 10;
        AxisY.Enabled = AxisEnabled.True;
        AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dot;

        var AxisX = chart.ChartAreas["Default"].AxisX;
        AxisX.Title = "時刻(時台)";
        AxisX.Enabled = AxisEnabled.True;

        chart.Series.Add("前日比");
        var 前日比 = chart.Series["前日比"];
        前日比.ChartArea = "Default";
        前日比.Legend = "凡例";
        前日比.ChartType = SeriesChartType.Line;
        前日比.YValueType = ChartValueType.Double;
        前日比.LabelFormat = "#0.0";
        前日比.MarkerStyle = MarkerStyle.Circle;
        前日比.MarkerBorderColor = Color.Blue;
        前日比.MarkerColor = Color.Blue;
        前日比.IsValueShownAsLabel = true;
        前日比.IsXValueIndexed = true;
        前日比.XValueType = ChartValueType.Int32;
        前日比.MarkerStep = 1;
        前日比.BorderWidth = 3;
        前日比.MarkerSize = 8;
        前日比.YValuesPerPoint = 2;

        double[] yValues = { 1.5, 2.5, 3.5, 4.5, -1.5 };
        string[] xValues = { "0", "1", "2", "3", "4" };

        前日比.Points.DataBindXY(xValues, yValues);

        var imageStream = new MemoryStream();
        chart.SaveImage(imageStream, ChartImageFormat.Png);
        return new FileContentResult(imageStream.ToArray(), "image/png");
    }

データはサンプルで固定値をセットしています、実行すると以下のようにグラフを描画することができます。WebFormの時とほぼ同じ(というか、同じChartコントロールを使用しているので同じでないと困るんですが)グラフを表示することができます。

image

ここからソースはダウンロードすることができます。ポイントとなるファイルは以下の通りです。

  • /Controllers/ChartsController.cs
  • /Controllers/DailyReportController.cs
  • /Views/DailyReport/Index.cshtml
  • Web.config

実際の画面を作成する際に注意する点は、1つの画面を表示する際に2回コントローラーが呼び出されることです。このサンプルソースの場合は、DailyReportsControllerとChartsControllerが呼び出されます。かといって同じViewModelを作成する処理を2回行うのは無駄なので、うまく効率的な処理を考えなければいけないですね。今はグラフが表示されただけで満足して考える余裕がありませんが。

次回からついに、節電効果計測サービスをAzure上で動作されるためにアプリを移行していこうと思います。Azureに依存しない部分の技術的な課題は解決できたと思っているので、ハマるとしたらAzureに特化した部分になると思います。

まずはSDKのダウンロードからですね。

Written by david9142

2011年5月4日 @ 1:02 AM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。