Question

我想用我在VB.Net 3.5网络应用程序后面的代码中计算的数字替换硬编码的数字。换句话说，下面是数字20,13和34。在此先感谢您的帮助。

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Tiers', 'Apps'],
      ['Tier 1', 20],
      ['Tier 1.5', 13],
      ['Tier 2', 34]
    ]);

    var options = {
      title: 'Balance'
    };

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

Answer 1

假设这需要比仅提供3个数字更通用，您可以在代码后面创建一个JSONArray变量（或者如果使用MVC等，则在模型的一部分中创建）。这是一个简单的样本，可以帮助您：

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([ <%= JSONArray %> ]);
  ...

在您的代码中，您将从您正在进行的任何计算中构建字符串JSON：

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected JSONArray As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        JSONArray = "" + _
              "['Tiers', 'Apps'], " + _
              "['Tier 1', 20], " + _
              "['Tier 1.5', 13], " + _
              "['Tier 2', 34]"

    End Sub

End Class

Answer 2

您可以使用Google.DataTable.Net.Wrapper库，而不是直接在代码中操作字符串，而是以完全类型安全的方式为您创建方便的JSON字符串。

您可以在此处找到一个广泛的示例：http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/

代码很简单：

using Google.DataTable.Net.Wrapper;
private static string GetDataTableJson()
{
    var dt = new DataTable();

    //Act -----------------
    dt.AddColumn(new Column(ColumnType.Number, "Tiers"));
    dt.AddColumn(new Column(ColumnType.String, "Apps"));

    var row1 = dt.NewRow();
    var row2 = dt.NewRow();
    var row3 = dt.NewRow();


    row1.AddCellRange(new[] { new Cell("Tier 1"),   new Cell(20) });
    row2.AddCellRange(new[] { new Cell("Tier 1.5"), new Cell(13) });
    row3.AddCellRange(new[] { new Cell("Tier 2"),   new Cell(34) });


    dt.AddRow(row1);
    dt.AddRow(row2);
    dt.AddRow(row3);

    return dt.GetJson();
}

会返回这样的JSON表示

{
"cols": [
            {"type": "string" ,"id": "Tiers" }, 
            {"type": "number" ,"id": "Apps" }
        ],
"rows" : 
        [
            {"c" : [{"v": "Tier 1"},   {"v": 20}]}, 
            {"c" : [{"v": "Tier 1.5"}, {"v": 13}]}, 
            {"c" : [{"v": "Tier 2"},   {"v": 34}]}
        ]
}

然后你可以直接嵌入你的javascript

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

Google Charts：动态数据

2 个答案: