2

我刚开始使用谷歌图表和它非常酷的东西。唯一的问题是我找不到任何使用从 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)，但仍然没有运气。我猜 google 不理解普通 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 看起来像上面的结构，可能更通用。唯一的图表示例是静态的，有时您需要读取数据库，请协助。

4

3 回答 3

3

我对这个主题的了解非常有限，但是如果您首先将 json 数据转换为可读的内容，然后执行循环以添加行怎么办？就像是：

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

接着

for(var key in jsondata) {

    data.addRows (row);

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

于 2012-10-12T14:56:03.033 回答
1

响应格式略有不同，您只粘贴了 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

于 2012-11-20T08:21:42.030 回答
0

添加一条语句来解析您的 json 字符串，例如 

var obj = $.parseJSON(jsonData);

并将解析的对象传递给 google DataTable

var data = new google.visualization.DataTable(obj);
于 2017-03-20T11:46:06.280 回答