如何将数据传递到 Google Charts？

Question

我正在尝试将 Google Charts 用于我的 ASP.NET 网站。我想将它包含在加载和计算 addrows 函数数据的页面上。

在计算出图表所需的计数后，如何将它们从后面的代码传递给页面上的脚本。我在 Visual Studio 2008 中使用 VB.NET。

将计数数据传递到图表的最佳方式是什么？

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Answer 1

您应该在服务器端创建 Google DataTable 类，用数据初始化它的实例，然后将其存储到 JSON 字符串，然后将该字符串分配给客户端的 Google DataTable，如下所示：

C#

public string GoogleDataTableJson { get; private set; }

protected void Page_Load(object sender, EventArgs e)
{
  GoogleDataTable table = CreateAndFillGoogleDataTable();
  Serializer ser = new Serializer(typeof(GoogleDataTable);
  this.GoogleDataTableJson = ser.Serialize(table);
}

然后在 JavaScript 中：

var data = new google.visualization.DataTable(<%= GoogleDataTableJson %>);

或者您可以使用 .NET 助手，它可以使用 .NET DataTable 类来填充 Google 可视化：

http://code.google.com/p/bortosky-google-visualization/