Asp.Net MVC剃须刀图使用jquery ajax调用

我想通过剃刀绑定数据图。我通过jquery ajax调用来获取数据，并计划将结果数据绑定到图表。有没有任何选项，包括jQuery的成功功能内的剃须刀代码？我如何将计数值绑定到图表代码中的x，yValues？Asp.Net MVC剃须刀图使用jquery ajax调用

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"} 
]}

编辑：或者，我可以使用由内部剃刀代码D组jquery的结果呢？

来源

2016-11-26 Kurkula

那是第一码块中相同的视图作为脚本（其生成图表）？简短的答案是否定的 - 在您将服务器传递给客户端之前，将在服务器上生成剃须刀代码。只需使用图表的局部视图，并在ajax调用中返回并更新DOM –

正如@Stephen Muecke所说，这种解决方案是不可能的，但是，也许可以通过使用局部视图在服务器中呈现图形来尝试，然后在网页中使用Ajax注入它。

事情是这样的：

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

脚本：

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

而在 “MyAction”：

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

因此，在这种情况下，在 'MyAction' 局部视图，你可以生成你的图。

来源

2016-11-30 10:18:15 Tistkle

无法从javascript更新C＃对象（即chartImage）。

但是你可以做一件事，因为你正在调用服务器来获取Json数据。因此，不要获取数据，您可以直接获取图表。

以下是代码： - 在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" />

来源

2016-11-30 10:41:41

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

来源

2016-12-06 06:20:33 Parag

Asp.Net MVC剃须刀图使用jquery ajax调用

回答

相关问题