如何使用Google图表以动态数据来自JSON

Question

我正在使用MVC，希望将我的数据连接到Google饼图。因此，我使用以下代码使用JSON获取名称列表及其计数：

public JsonResult list()
        {
     var result= list.GroupBy(i => i.Name).Select(i => new { word = i.Key, count = i.Count() 
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

使用Google图表API

 google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var jsonData = $.ajax({
            url: "list",
            dataType: "json",
            async: false
        }).responseText;
        var data = google.visualization.DataTable(jsonData);

        var options = {
            title: 'Certificate details',
            is3D: true,
        };    
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
    }

我想知道如何将我的数据键值对列表转换成饼状图。我已经搜索了很长时间，但是所有的示例都是用php写的。谢谢。

- coder

---

我不确定你想在服务器端使用什么，但我可以帮助你在客户端解析数据。jsonData 包含什么？ - asgallant

我的Json将返回以下数组= [{"word":group1,"count":1},{"word":group2,"count":2},{"word":group3,"count":1},{"word":group4,"count":1}]。如何从客户端解析。谢谢 - coder

Answer 1

您可以像这样在客户端解析该数据：

function drawChart () {
    $.ajax({
        url: "list",
        dataType: "json",
        success: function (jsonData) {
            var data = new google.visualization.DataTable();
            // assumes "word" is a string and "count" is a number
            data.addColumn('string', 'word');
            data.addColumn('number', 'count');

            for (var i = 0; i < jsonData.length; i++) {
                data.addRow([jsonData[i].word, jsonData[i].count]);
            }

            var options = {
                title: 'Certificate details',
                is3D: true
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
        }
    });
}

- asgallant

---

有没有办法使用这段代码并选择每个分片的颜色？ - Marcel Marino

Answer 2

我创建了一个基本的处理程序，提供一些与动态谷歌图表一起使用的方法。

首先，您需要注册数据或其中的一部分。之后，您可以在必要时执行呈现。

请参阅：http://github.com/ahlechandre/chart-handler。

- Alexandre Thebaldi