Asp.Net MVC Rasiermesser Graph mit jquery Ajax Anruf

Question

Ich versuche, Daten über Rasierer zu Graphen zu binden. Ich ziehe Daten durch einen jQuery-Ajax-Aufruf und plane, die resultierenden Daten an ein Diagramm zu binden. Gibt es eine Option, den Rasierklingen-Code in die jquery-Erfolgsfunktion aufzunehmen? Wie kann ich Zählwerte im Diagrammcode an x, yValues ​​binden?

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 Skript

<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> 

Ergebnis Json:

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

Edit: Oder kann ich jquery Ergebnis GroupD von innen Razor Code verwenden?

Answer 1

Wie @Stephen Mücke sagte, ist diese Art von Lösung nicht möglich, aber vielleicht können Sie es versuchen, indem Sie eine Teilansicht verwenden, um Ihr Diagramm auf dem Server zu rendern und dann mit AJAX in Ihre Webseite zu injizieren.

Etwas wie folgt aus:

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

Skript:

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

Und in "MyAction":

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

Also, in diesem Fall in 'MyAction' Teilansicht, Sie können Ihr Diagramm erstellen.

Answer 2

Es gibt keine Möglichkeit, C# -Objekt (z. B. chartImage) von Javascript zu aktualisieren.

Aber Sie können eine Sache tun, wie Sie Anruf zum Server machen, um Json Daten zu erhalten. Anstatt Daten zu erhalten, können Sie direkt ein Diagramm aufrufen.

Es folgt der Code: - In 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