将正常的json数据转换为Google Visualization DataTable可以理解的数据

Question

我刚刚开始使用谷歌图表和它非常酷的东西。唯一的问题是我找不到任何使用从 sql 服务器视图提供的数据来实现这一点的好示例。所以我创建了一个示例项目来促进这个功能，无论我正在努力让它工作。请在下面找到我的代码：

<script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', { 'packages': ['corechart'] });
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var jsonData = $.ajax({
                url: "api/Google",
                dataType: "json",
                async: false
            }).responseText;
            alert(jsonData);
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);
            data.addColumn('string', 'Employee');
            data.addColumn('number', 'TotalNoOfReports');
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, { width: 400, height: 240 });
        }
    </script>

我得到了正确的 json 数据字符串，但是当我将我的 jsonData 传递到 DataTable（） 类时，它没有返回图表的数据。我也尝试调用数据。AddRows（jsonData），但仍然没有运气。我猜谷歌不了解正常 json 数据的结构，并要求它采用以下格式：

{"cols":[{"id":"Col1","label":"","type":"date"}],
  "rows":[
    {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
    {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
  ]
} 

有没有办法让我的 jsonData 看起来像上面的结构，可能是更通用的东西。唯一的图表示例是静态的，有时您需要读取数据库，请协助。

Answer 1

我在这方面的知识非常有限，但是如果您先将 json 数据转换为可读的内容，然后执行循环以添加行怎么办？像这样：

var jsondata = eval ("(" + JSONObject + ")");

然后

for(var key in jsondata) {
    data.addRows (row);

我知道这是一个非常有限和简短的答案，但也许其他人会有更好的解决方案。

Answer 2

响应格式略有不同，你只粘贴了 dataTable 部分，但它也包含状态码、请求 ID 和 api 版本：

{version:'0.6',reqId:'0',status:'ok',sig:'5982206968295329967',table:{cols:[{id:'Col1',label:'',type:'number'},{id:'Col2',label:'',type:'number'},{id:'Col3',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]},{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},{c:[{v:3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]}};

你可以在这里阅读更多关于它的信息：

https://developers.google.com/chart/interactive/docs/dev/implementing_data_source

Answer 3

添加一个语句来解析你的 json 字符串，就像

var obj = $.parseJSON(jsonData); 

并将解析后的对象传递给谷歌数据表

var data = new google.visualization.DataTable(obj);