jquery ajaxコールを使用したAsp.Net MVCカミソリグラフ

Question

私はカミソリを通してグラフにデータをバインドしようとしています。私は、jquery ajaxコールを通してデータをプルし、結果のデータをグラフにバインドするよう計画しています。 jquery success関数内にひげコードを含めるオプションはありますか？カウント値をチャートコードのx、yValuesにバインドするにはどうすればよいですか？

https://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart

@{ 
    var CountsPath = Server.MapPath("~/Content/Images/counts.jpg"); 

    if (File.Exists(CountsPath)) 
    { 
     File.Delete(CountsPath); 
    } 

    var PathName = "~/Content/Images/counts.jpg"; 
    if (!File.Exists(Server.MapPath(PathName))) 
    { 
     var chartImage = new Chart(600, 400); 
     chartImage.AddTitle("Count"); 
     chartImage.AddSeries(
      chartType: "Pie", 
       name: "Sales", 
       axisLabel: "Count", 
       xValue: new[] { "2011", "2014" },//need from json 
       yValues: new[] { "40", "285" });//need from json 
     chartImage.Save(path: PathName); 
    } 
} 

jQueryのスクリプト

<script> 
    $(document).ready(function() { 
     $.ajax({ 
      type: 'get', 
      url: '/Home/GetSales', 
      success: function (data) { 
//Bind sales data counts by year result to graph 

      }, 
      error: function (response) { 
       alert(response.Message); 
      }, 
      dataType: 'json' 
     }); 
    }); 
</script> 

結果JSON：

{"Sales":[ 
    {"Year":"2011", "loc":"ca"}, 
    {"Year":"2014", "loc":"wa"}, 
    {"Year":"2011", "loc":"wi"} 
]} 

編集：または私は内部のレイザーコードによってgroupd jqueryの結果を使用することはできますか？

Answer 1

@Stephen Muecke氏によると、この種の解決策はありませんが、部分ビューを使ってサーバーでグラフをレンダリングし、Webページにajaxを挿入して試すことができます。

このような何か：

<div> 
    your page content 
    <div id="graph"> 
    </div> 
</div> 

スクリプト：

$("#graph").load("MyAction", { yourdata }, function() { yourcallback }); 

そして "MyAction" で：

public ActionResult MyAction(...) { 
    ... 
    return PartialView(Model); 
}; 

ので、この場合は、 'MyAction' 部分図グラフを生成することができます。

Answer 2

javascriptからC＃オブジェクト（chartImageなど）を更新する方法はありません。

しかし、あなたはJsonデータを取得するためにサーバーに電話をかけている間に、1つのことを行うことができます。したがって、データを取得する代わりに、グラフを直接取得することができます。

コードを以下に示します。 - にHomeController

で

public class HomeController : Controller 
{ 
    // GET: Home 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult GetSales() 
    { 
     var chartImage = new Chart(600, 400); 
     chartImage.AddTitle("Count"); 
     chartImage.AddSeries(
      chartType: "Pie", 
       name: "Sales", 
       axisLabel: "Count", 
       xValue: new[] { "2011", "2014" },// Make change based on your Json Data 
       yValues: new[] { "40", "285" }// Make change based on your Json Data 
       ).Write(format: "jpg"); 
     return null; 
    } 
} 

Index.cshtml

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<img src="/home/GetSales" /> 

Answer 3

I have created chart in my application using below code 

// On controller side 

public void My_Chart(List<my_Class> objClass) 
    { 
     var myChart = new Chart(width: 400, height: 300, theme: ChartTheme.Blue) 
     .AddTitle("My Chart Title") 
     .AddLegend() 
     .AddSeries("Default", 
     xValue: objClass, xField: "FieldName", 
     yValues: objClass, yFields: "FieldName") 
     .ToWebImage("png"); 
     // Charts is folder inside my project where image is got saved 
     myChart.Save("~/Charts/My_image", "jpeg"); 
    } 


// And .cshtml side code is as follows 

<img src="../Charts/My_image.jpeg" />`enter code here` 

Note: before image loads your controller side code must be initialised