web-dev-qa-db-ja.com

ASP.Net MVC 3のグラフ

ASP.Net MVC 3でChart Webヘルパーを使用しています。このAPIの機能を示すさまざまな光沢のある画像をオンラインで見ましたが、グラフのスタイルを設定する方法に関するドキュメントはほとんどありません。たとえば、グラフの外側にラベルを表示する必要があります。小数値ではなくパーセンテージを指定します。

ダウンロード用のwebformsプロジェクトがあります： http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4- series.aspx と、値の割り当て方法と基本的なディメンションの指定方法を説明する非常にシンプルなクラスドキュメント。

MVC 3でまだ本が出版されていないことを理解していますが、確かにツールの使用方法を説明する何らかのドキュメントがあるはずです。

ありがとうございました

編集：

私が読んだことから、ASP.Net MVC 3は、グラフのスタイルを設定する機能を削除することにより、グラフ作成ツールを一歩後退させるか、まったく文書化されていません。この記事に出くわした： http://forums.asp.net/t/1620783.aspx/1?ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+ 、非常によく似た問題がそこで説明されています。

EDIT 2：MicrosoftはMVC 3にMSCharts機能を部分的に実装しているようです。MSChartsを使用するには、System.Web.DataVisualization Assemblyをインポートする必要がありますそしてweb.configurationファイルに登録されています。 T

このようにして、リクエストはビューからコントローラーに送信されます。コントローラーはグラフの画像を生成し、画像の結果を返します。結果がビューに表示されます。これはある種の分離を提供するので便利です。 System.WebHelpers.Chartがこの機能をまだ提供していない理由はまだわかりませんが、近い将来に対応することを期待しています。

EDIT 3：指摘する点がほとんどないビューでグラフを作成しないでください-それらはコントローラーによって提供されるべきです。グラフの作成にビューを使用する場合は、ビューフォルダーのweb.configを更新して、名前空間セクションに<add namespace="System.Web.UI.DataVisualization"/>を含めてください。アセンブリと名前空間の名前は少し混乱しています。名前空間がSystem.Web.UI.DataVisualizationと呼ばれる場合、アセンブリはSystem.Web.DataVisualizationと呼ばれます。最後に、チャートAPIは素晴らしいと思います。画像を提供するため、すべてのWebブラウザーからチャートにアクセスできます。チャートの品質は素晴らしいです。 Fusion Charts、HighCharts、および他のいくつかのjQuery/JavaScript/Flashを使用したグラフなどの代替手段を見てきました。彼らはすべて、開発者の最も基本的なニーズを満たそうとせずに、あなたから£300〜£1000を引き出そうとします。

c#asp.netasp.net-mvc-3charts
21
user338195

チャートコントロールは、以前はMSチャートと呼ばれていた別のプロジェクトに基づいています。

Alex Gorevのブログ（プロジェクトのMSFTリード開発者）： http://blogs.msdn.com/b/alexgor/

MSチャートフォーラム： http://social.msdn.Microsoft.com/Forums/en-US/MSWinWebChart/

MSDNのドキュメント： http://msdn.Microsoft.com/en-us/library/dd456632（VS.100）.aspx

投稿は少し古くなっているように見えますが、APIはMS Chartと新しいデータ視覚化ライブラリの間でほとんど同じです。

例の質問に対処するには：

1）チャートの外側にラベルを表示するために、各Seriesオブジェクトにはプロパティのディクショナリ配列があります。

series["PieLabelStyle"] = "Outside";

2）生の値ではなくパーセンテージを指定するために、SeriesオブジェクトのLabelプロパティはフォーマット文字列を取ります。

series.Label = "#PERCENT{P0}"

これらのカスタム属性は http://msdn.Microsoft.com/en-us/library/dd456764.aspx で詳細に入手できます。

編集：コード例の追加

さて、これが完全なコード例です。私はSystem.Web.DataVisualization v4.0.0.0を使用しているので、これはMVC 3で最新のはずです。上記のseriesは実際のChart.Seriesプロパティではありません（SeriesCollection）。そのコレクションに追加するのは、個々のseriesです。

public ActionResult TestForSOExample()
{
  // slug in some data
  var data = new Dictionary<string, float>
        {
            {"test", 10.023f},
            {"test2", 20.020f},
            {"test3", 19.203f},
            {"test4", 4.039f},
            {"test5", 5.343f}
    };


  var chart = new Chart();

  var area = new ChartArea();
  // configure your chart area (dimensions, etc) here.
  chart.ChartAreas.Add(area);

  // create and customize your data series.
  var series = new Series();
  foreach (var item in data)
  {
        series.Points.AddXY(item.Key, item.Value);
    }
  series.Label = "#PERCENT{P0}";
  series.Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
  series.ChartType = SeriesChartType.Pie;
  series["PieLabelStyle"] = "Outside";

  chart.Series.Add(series);

  var returnStream = new MemoryStream();
  chart.ImageType = ChartImageType.Png;
  chart.SaveImage(returnStream);
  returnStream.Position = 0;
  return new FileStreamResult(returnStream, "image/png");
}

コントローラーのアクションを呼び出すと、次の画像が表示されます。

example image from controller action

35
David R. Longnecker

クライアントでチャートをレンダリングすることをお勧めします。サーバーで作成するのではなく、サーバーを使用してデータをプルする必要があります。 google charts のようなsmthを使用します。しかし、実際にサーバーからチャートを引き出すことに決めた場合、画像を具体的にするには、上記のアプローチを使用するのが最も簡単です-チャートクラス。しかし、このアプローチの欠点の1つは、そのためのデザイナーがいないことですが、実際には、WinFormsアプリを作成してChartsコントロールをドラッグアンドドロップすると、まったく同じであり、そのためのデザイナーがすべています。必要に応じて、デザイナーが生成したコードをコピーして貼り付け、処理ロジックを記述する必要があります。それは人生をずっと簡単にします。

0
Marcello