web-dev-qa-db-ja.com

ASP.NET MVC 4（Razor、C＃）Webサイトへのチャートの描画

ASP.NET MVC 4（Razor）経由でC＃を使用してグラフ（曲線、ヒストグラム、円）を描画することは可能ですか？データベースから抽出したデータからグラフィックを作成しようとしています。しかし、私は方法を見つけることができません。

何か提案がありますか？

どうもありがとう ！

c#asp.net-mvcasp.net-mvc-4razorcharts
22
user3212730

チャートヘルパー があります。これは、Razorで非常にうまく機能し、チャート、ヒストグラム、およびデータの他のグラフィカル表現を非常に簡単に構築できます。

または、jQuery/HTML5/Javascriptライブラリを使用することもできます。

  • Highcharts は、純粋なHTML5/JavaScriptで記述されたチャートライブラリで、WebサイトまたはWebアプリケーションに直感的でインタラクティブなチャートを提供します。

  • jqPlot は、jQuery Javascriptフレームワークのプロットおよびグラフ作成プラグインです。

  • Raphaël は、Web上のベクターグラフィックスでの作業を簡素化する小さなJavaScriptライブラリです。

それらはもっとありますが、上記のものはほんの一例です。

33
Paweł Bejger

データをグラフィック形式で表示する場合は、チャートヘルパーを使用できます。チャートヘルパーは、さまざまなチャートタイプでデータを表示する画像をレンダリングできます。

次のように、チャートのカミソリコードを持つビューを作成できます（MyChart.cshtmlと言います）。

テーマを使用した配列の棒グラフ

@{
    var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

配列からの円グラフ

@{
    var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            chartType: "Pie",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

テーマを使用した配列からの円グラフ

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            chartType: "Pie",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

DBクエリを使用した棒グラフ

@{
    var db = Database.Open("DBName");
    var data = db.Query("SELECT Col1, Col2 FROM Table");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .DataBindTable(dataSource: data, xField: "Col1")
        .Write();
}

これらのチャートビュー/ PartialViewは、画像のソースとして必要な場所で使用できます。

例.

<html>
    <body>
         <img src="MyChart.cshtml" />
         <!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
    <body>
<html>

チャートTheams

Vanilla白い背景に赤い列を表示します。

Blue青いグラデーションの背景に青い列を表示します。

緑緑のグラデーションの背景に青の列を表示します。

黄色黄色のグラデーションの背景にオレンジ色の列を表示します。

Vanilla3D白い背景に3D赤い列を表示します。

SeriesChartType列挙は以下をサポートします。

  1. エリア
  2. バー
  3. BoxPlot
  4. バブル
  5. ローソク足
  6. カラム
  7. ドーナツ
  8. ErrorBar
  9. 早い列
  10. FastPoint
  11. 漏斗
  12. カギ
  13. ライン
  14. パイ
  15. ポイント
  16. PointAndFigure
  17. 極地
  18. ピラミッド
  19. レーダー
  20. 範囲
  21. RangeBar
  22. RangeColumn
  23. 蓮子
  24. スプライン
  25. スプラインエリア
  26. SplineRange
  27. StackedArea
  28. StackedArea100
  29. StackedBar
  30. StackedBar100
  31. StackedColumn
  32. StackedColumn100
  33. StepLine
  34. 株式
  35. ThreeLineBreak

これは、RazorページのChartヘルパーに文字列として渡すことができる名前のリストです。

これはヘルパーです

namespace System.Web.Helpers
{
    public class Chart
    {
        public Chart(int width, int height, string template = null, string templatePath = null);
        public string FileName { get; }
        public int Height { get; }
        public int Width { get; }
        public Chart AddLegend(string title = null, string name = null);
        public Chart AddSeries(string name = null, string chartType = "Column", string chartArea = null, string axisLabel = null, string legend = null, int markerStep = 1, IEnumerable xValue = null, string xField = null, IEnumerable yValues = null, string yFields = null);
        public Chart AddTitle(string text = null, string name = null);
        public Chart DataBindCrossTable(IEnumerable dataSource, string groupByField, string xField, string yFields, string otherFields = null, string pointSortOrder = "Ascending");
        public Chart DataBindTable(IEnumerable dataSource, string xField = null);
        public byte[] GetBytes(string format = "jpeg");
        public static Chart GetFromCache(string key);
        public Chart Save(string path, string format = "jpeg");
        public string SaveToCache(string key = null, int minutesToCache = 20, bool slidingExpiration = true);
        public Chart SaveXml(string path);
        public Chart SetXAxis(string title = "", double min = 0, double max = 0.0 / 0.0);
        public Chart SetYAxis(string title = "", double min = 0, double max = 0.0 / 0.0);
        public WebImage ToWebImage(string format = "jpeg");
        public Chart Write(string format = "jpeg");
        public static Chart WriteFromCache(string key, string format = "jpeg");
    }
}

これがお役に立てば幸いです。

33
Pranav Labhe

JavaScriptでアンチャートを試すことができます。とても便利です。

https://www.amcharts.com/

0
mcgrawhill