Question

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

<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（）类时，它没有返回图表的数据。我也试过调用data.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);

并将解析后的对象传递给Google DataTable

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

将普通的json数据转换为Google Visualization DataTable可以理解的数据？

3 个答案: