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

iam using mvc, i want to connect my data to google pie chart. so i used json to get list of names and their count using the following code

我使用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);
}

Using the google chart API

使用谷歌图表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);
    }

i want to know how to get list of key value pairs of my data into pie chart. i have googled for long time, everybody is giving code example with php. Thankyou.

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

2 个解决方案

#1

You can parse that data client-side like this:

您可以像这样解析客户端的数据:

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

#2

I created a basic handler to provide some methods to work with dinamic google charts.

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

First you register the data or part of it. After this, you are able to render when necessary.

首先注册数据或部分数据。在此之后,您可以在必要时进行渲染。

Look at: http://github.com/ahlechandre/chart-handler

请看:http://github.com/ahlechandre/chart-handler

#1