是否有一个现有的js方法/库将普通的json对象转换为js对象的可视化类型？

Question

我们有现有的其他Web服务生成json响应。现在我们要使用谷歌图表来显示这些数据。谷歌可视化API似乎期望自己的JSON格式。是否有任何退出js方法/库将常规json对象转换为谷歌可视化类型的js对象？谢谢。

Answer 1

这实际上取决于你的目标是什么，数据是什么样的，以及你想要使用的谷歌图表。使用REST数据和谷歌图表时，我通常会执行以下操作。

在这个例子中，我使用jQuery，但是你使用的js库并不相关。

说你已经得到了下面一组数据和如何它显示了在areachart：

{"events":[{"event":{"timestamp":"1310926588423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926578423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926568423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926558423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926548423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926538423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926528423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926518423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926508423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926498423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}}]} 

要使用jQuery和JSONQuery（可以轻松选择特定的内容帮助你的JSON数据做）你可以这样做：

// use the getJSON jQuery operation to get the REST data 
    $.getJSON(restURL, function(data) { 

    // use jsonquery to get all the 'event's from the JSON data  
    var query1 = "..event"; 
    var rootEvent = JSONQuery(query1,data); 

    // manually create a datatable and fill it in the required 
    // way for this chart   
    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('string', 'Number of queries/per 10 seconds'); 
    data2.addColumn('number', '# queries'); 

    // each row is added based on information from the json event 
    // by simply iterating over the array 
    data2.addRows(rootEvent.length); 
    for (i = 0; i < rootEvent.length; i++) { 
     var date = new Date(parseInt(rootEvent[i]['timestamp'])); 
     var hours = date.getHours(); 
     var minutes = date.getMinutes(); 
     var seconds = date.getSeconds(); 

     var time = ''; 
     if (hours < 10) time=time+'0'; time=time+hours+':'; 
     if (minutes < 10) time=time+'0'; time=time+minutes+':'; 
     if (seconds < 10) time=time+'0'; time=time+seconds; 

     data2.setCell(i,0,time); 
     data2.setCell(i,1,parseInt(rootEvent[i]['countAll3Sec_EsperEventProcessor'])); 
    } 


    chart.draw(data2, {width: 400, height: 240, title: 'Requests per 10 seconds', 
         hAxis: {title: 'Time', titleTextStyle: {color: '#FF0000'}} 
    }); 
});