テスターですが何か?

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

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

leave a comment »

節電効果計測サービスはChartコントロールを使用した節電率と電力使用量をグラフ表示させているところがポイントです。グラフでの可視化そのものが目的であり、グラフがなくなってしまえば、サービスそのものの価値に意味がなくなると言っても過言ではありません。WindowsAzureへの移行に合わせてASP.NET MVC3へも移行する予定ですが、グラフをどう描画していいのか明確な解決策がありません。今のところ検討する解決案は以下のとおりです。

その1: ASP.NET MVC ChartHelperを使用する

このサイト(まめしば雑記)で紹介されていますが、System.Web.Helperに含まれているChartヘルパーを利用してグラフを描画することができます。ChartControlはExcelのグラフ機能に匹敵するほど高機能ですが、Chartヘルパーを利用して同等の機能を実現できるか検証する必要があるます。可能ならこの方法で実現したいです。

その2: ASP.NET MVCでChartコントロールを使用する

こんなこと出来るかどうかわかりませんが...確かASP.NET MVCでWebFormのコントロールを使用する方法があったはずなので、実現不可能ではないはずです。Chartヘルパーの機能が弱ければ、この方法で実現するしかないと思います。ゼロから調べる必要がありますが。

その2: HTML5、JavaScriptでグラフを描画する

まちがいなく実現できると思いますが、やったことがないのでやりたくないです。たぶんjQueryあたりで実現できそうですが...将来的にはこのやり方が主流になるのかもしれません。

その4: ASP.NET MVCをあきらめてWebFormを利用する

もう最悪の手段です。「Webの未来」としてASP.NET MVCのみが紹介され、存在そのものがはぶられつつあるWebFormを積極的に利用しようとは思わないように思い始めました。なんとなくWebFormが「Classic ASP.NET」と表記される未来が来るような気がします。

 

Chartヘルパーの検証

さっそくChartヘルパーの検証を行おうと思います。View部分にRazor構文でChartを作っていきます。Intellisenseに任せて衝動的に作っていきます。

@{
    var chart = new Chart(width: 600, height: 450)
        .AddTitle("時刻別節電達成率")
        .SetYAxis("節電率(%)", -30, 50)
        .SetXAxis("時刻(時代)")
        .AddLegend("凡例")
        .AddSeries(name: "前日比", chartType: "Line",
                    xValue: Model.UsageList, xField: "XValueElement",
                    yValues: Model.UsageList, yFields: "PreviousDaySaving")
                    .AddSeries(name: "前年比", chartType: "Line"
                    xValue: Model.UsageList, xField: "XValueElement",
                    yValues: Model.UsageList, yFields: "PreviousYearSaving")
        .Write();
}

で、実行するとこうなります。
image

何となくよさそうに見えますが、ChartControlに比べると少なくとも以下の機能が不足しています。

  • Y軸の節電率のグリッドの単位(何%単位でグリット線を設定するのか)を指定できない
  • グラフの線の太さを指定できない
  • グラフのポイントをドットに設定できない
  • グラフのポイントのY軸の値を表示できない

参考までに、節電効果計測サイトでは、Chartコントロールのプロパティを以下の通り設定しています。少なくともこれだけのプロパティを設定したいのですが...Intellisenseにこれ以上のプロパティやメソッドが表示されないので、たぶん無理なんだと思います。

<asp:Series ChartArea="ChartArea1" ChartType="Line" Name="前日比"
  YValueType="Double" LabelFormat="#0.0"
  MarkerStyle="Circle" MarkerBorderColor="Blue" MarkerColor="Blue"
  Legend="Legend1" IsValueShownAsLabel="True" IsXValueIndexed="True"
  XValueType="Int32" MarkerStep="1" BorderWidth="3" MarkerSize="8"
  YValuesPerPoint="2">
</asp:Series>

Chartヘルパーは機能不足という結論になりました。次回のエントリーでは、ASP.NET MVCでChartコントロールを使用する方法を調べようと思います。

Written by david9142

2011年5月4日 @ 12:11 AM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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