Googleビジュアライゼーション/グラフをAjaxコール経由で読み込むことはできませんか？

Question

静的メソッドとは異なるAjax呼び出しを使用してGoogleグラフを作成する特別な方法はありますか？

通常のHTMLファイルからロードされるため、生成しているHTMLは正しいですが、Ajaxを呼び出すとグラフのデータが表示されません。

私はgoogle.setOnLoadCallback（）とgoogle.load（ '可視化'、 '1'、{パッケージ：[ 'テーブル']}）を使用していますあなたは、AJAX呼び出しからデータを取得し、配置する必要があり

Answer 1

をそれはあなたの視覚化機能にあります。ここ は私のコードです：

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); 
    }