将数据传递给 Javascript 函数

本文关键字：Javascript 函数 数据 | 更新日期: 2023-09-27 18:35:35

我正在使用以下代码片段来填充谷歌图表-

<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 数据？

将数据传递给 Javascript 函数

由于您已经拥有 JSON 字符串，因此解析它然后重新序列化它是没有意义的。 只需直接注入它，并使用Javascript映射到Google 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);
}

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

相关文章：