谷歌圖表：動態數據

Question

我想用我的VB.Net 3.5 web應用程序後面的代碼中計算的數字替換硬編碼的數字。換句話說，下面的數字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個數字比較一般，你可以（如果使用MVC等，或模型的一部分）在代碼中創建一個JSONArray變量後面。這裏是一個應該讓你去一個簡單的例子：

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