将数据传递给JavaScript函数

我使用下面的片段来填充Google Chart -将数据传递给JavaScript函数

<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000, 400], 
      ['2005', 1170, 460], 
      ['2006', 660, 1120], 
      ['2007', 1030, 540] 
     ]); 

     var options = { 
      title: 'Company Performance' 
     }; 

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

这工作一种享受，并根据需要创建一个折线图。

不过，我希望将数据从我的代码传递给这个函数的背后 -

protected void Page_Load(object sender, EventArgs e) 
{ 
    string JsonString = "{'res':[{'category':'A','count':17167},{'category':'B','count':18183},{'category':'C','count':17972},{'category':'D','count':18539}]}"; 
    Jobj = JObject.Parse(JsonString); 

    // extract values from Json 
      foreach (var response in Jobj["res"]) 
      { 

       string category= (string)response["category"]; 
       int count = (int)response["count"]; 

       // put values into format that can be passed to the javascript function 

      } 
}

然后用像 -

function drawChart() { 
    var data = google.visualization.arrayToDataTable([<%=Data Values%>]);

凡count和category是X轴和Y轴值和17167,18183 etc是图上的点。但是，显然上述语法不正确，我如何修改函数来接受我的Json数据？

来源

2013-10-16 Ebikeneser

找到[此处]（https://developers.google.com/chart/interactive/docs/reference#DataTable）文档有帮助吗？它似乎描述你需要什么...... – Floris

由于您已经拥有JSON字符串，解析它并没有意义，然后重新序列化它。只需直接注入它，并使用Javascript来映射到谷歌的Viz格式：

function drawChart() { 
    var json = <%= JsonString %>; 
    var arr = [ ["Category", "Count"] ]; 
    json.res.forEach(function(item) { 
     arr.push([ item.category, item.count ]); 
    }); 
    console.log(JSON.stringify(arr)); // [["Category","Count"],["A",17167],["B",18183],["C",17972],["D",18539]] 
    var data = google.visualization.arrayToDataTable(arr); 
}

Here是数据映射部分的演示。

来源

2013-10-16 17:24:22 McGarnagle

清晰而高效的答案。荣誉。 – Ebikeneser

将数据传递给JavaScript函数

回答

相关问题