Не удается загрузить визуализацию или график Google через вызов Ajax?

Question

Существует ли особый способ создания диаграммы Google с помощью вызова Ajax, который отличается от статического метода?

HTML-код, который я создаю, является правильным, поскольку он загружается из обычного HTML-файла, нокогда я вызываю Ajax, данные на графике не отображаются.

Я использую google.setOnLoadCallback () и google.load ('visualization', '1', {packages: ['table']})

Answer 1

Вам нужно получить данные из вызова ajax, а затем вставить их в функцию визуализации.Вот мой код:

google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(OnLoad);   

var url = '/Charting/GetData';
function OnLoad() {
    $.ajax({
        url: url,
        dataType: 'json',          
        success: function (response) {
            drawVisualization(response);
        }
    });
};

function drawVisualization(response) {
   var chart = new google.visualization.ColumnChart(
       document.getElementById('visualization'));

   var data = new google.visualization.DataTable(response);   
   chart.draw(data);
};

Также я рекомендую использовать этот класс для генерации правильного ответа JSON:

public class ChartHelper
{
    public ColInfo[] cols { get; set; }
    public DataPointSet[] rows { get; set; }    
}

public class ColInfo
{
    public string id { get; set; }
    public string label { get; set; }
    public string type { get; set; }
}

public class DataPointSet
{
    public DataPoint[] c { get; set; }
}

public class DataPoint
{
    public object v { get; set; } // value
    public string f { get; set; } // format
}

Затем вы можете использовать его следующим образом:

[ActionName("data")]
public JsonResult Data()
{
   Random r = new Random();
   var graph = new ChartHelper
   {
       cols = new ColInfo[] {
           new ColInfo { id = "A", label = "Name", type = "string" },
           new ColInfo { id = "B", label = "Value", type = "number" },
       },
       rows = new DataPointSet[] {
           new DataPointSet { 
               c = new DataPoint[] 
               {
                   new DataPoint { v = "Name" },
                   new DataPoint { v = r.NextDouble()},
               }},
           new DataPointSet {
               c = new DataPoint[]
               {
                   new DataPoint { v = "Name2" },
                   new DataPoint { v = r.NextDouble()},
               }},
           new DataPointSet {
               c = new DataPoint[]
               {
                   new DataPoint { v = "Name3" },
                   new DataPoint { v = r.NextDouble()},
               }} 
            }
        };

        return Json(graph, JsonRequestBehavior.AllowGet);
    }