Question

我使用mvc，我想将我的数据连接到谷歌饼图。所以我使用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);
    }

我想知道如何将我的数据的键值对列表放入饼图中。我已经google了很长时间，每个人都在用PHP提供代码示例。三江源。

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

Answer 2

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

首先你register数据或部分数据。在此之后，您可以在必要时render。

请注意：http://github.com/ahlechandre/chart-handler

如何使用来自json的动态数据使用谷歌图表

2 个答案: