如何使用來自json的動態數據使用谷歌圖表

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

使用谷歌圖表 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 給出代碼示例。 謝謝你。

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

我創建了一個基本的處理程序來提供一些使用動態谷歌圖表的方法。

首先，您register數據或其中的一部分。 在此之后，您可以在必要時進行render 。

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