將JSON文檔格式化爲可視化所需的規格

我試圖根據彈性搜索中的數據創建Google圖表。該JSON文件必須採用以下格式：將JSON文檔格式化爲可視化所需的規格

{ 
    "cols": [ 
     {"id":"","label":"Lane","type":"string"}, 
     {"id":"","label":"Routes","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"M01"},{"v":4657}]}, 
     {"c":[{"v":"M02"},{"v":4419}]}, 
     {"c":[{"v":"M03"},{"v":4611}]}, 
     {"c":[{"v":"M04"},{"v":4326}]}, 
     {"c":[{"v":"M05"},{"v":4337}]}, 
     {"c":[{"v":"M06"},{"v":5363}]} 
     ] 
    }

我的查詢（通過AJAX命令）返回以下數據：

$ curl http://localhost:9200/wcs/routes/_search?pretty=true -d '{"query_all":{}}}' 
    { 
     "took" : 2, 
    "timed_out" : false, 
    "_shards" : { 
    "total" : 5, 
    "successful" : 5, 
    "failed" : 0 
    }, 
    "hits" : { 
    "total" : 7, 
    "max_score" : 1.0, 
    "hits" : [ { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "4", 
     "_score" : 1.0, "_source" : {"lane":"M04","routes":"102"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "5", 
     "_score" : 1.0, "_source" : {"lane":"M03","routes":"143"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "1", 
     "_score" : 1.0, "_source" : {"lane":"M07","routes":"80"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "6", 
     "_score" : 1.0, "_source" : {"lane":"M02","routes":"157"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "2", 
     "_score" : 1.0, "_source" : {"lane":"M06","routes":"101"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "7", 
     "_score" : 1.0, "_source" : {"lane":"M01","routes":"105"} 
    }, { 
     "_index" : "wcs", 
     "_type" : "routes", 
     "_id" : "3", 
     "_score" : 1.0, "_source" : {"lane":"M05","routes":"160"} 
    } ] 
    } 
    }

的HTML/JS說我試圖運行（與目前沒有返回）如下。有人能提供一些見解，說明我可能做錯了什麼嗎？這將不勝感激。

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

    google.load('visualization', '1', {'packages':['corechart']}); 

    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: 'http://localhost:9200/wcs/routes/_search?pretty=true' 
       , type: 'POST' 
       , data : 
        JSON.stringify(
        { 
        "query" : { "match_all" : {} } 
       }) 
       , dataType : 'json' 
      async: false 
      }); 

    var json = JSON.parse(jsonData); 
    var jdata = '{ "cols": [{"id":"", "label":"lane", "type": "string"},' + '{"id": "", "label": "routes", "type": "number"}],' + '"rows":[{"c": [{"v":' + json.hits[0].hits[0]._source.lane + '},{"v":' + json.hits[0].hits[0]._source.routes + '}]}]'; 

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

     var chart = new google.visualization.PieChart(document.getElementById('piechart_div')); 
    chart.draw(data, {is3D: true, title: 'Multi Routes per Lane', width: 600, height: 440}); 
    } 
    </script> 
</head> 
<body> 
    <input type="button" onclick = "drawChart()" value="test"> 
    <div id="piechart_div"> </div> 
</body> 
</html>

來源

2013-04-08 Shawn Roller

嘗試使用成功處理程序代替 – 2013-04-08 22:30:58

我認爲'new google.visualization.DataTable'需要一個對象，而不是一個字符串。 – 2013-04-08 22:31:49

'var jsonData = $ .ajax..'將返回一個承諾...不是響應。你也必須創建一個循環來生成數據數組 – charlietfl 2013-04-08 22:32:19

之所以能夠請使用以下代碼（謝謝dinjas）：

 var json; 
    $.ajax({ 
      url: 'http://localhost:9200/wcs/routes/_search', 
      type: 'POST', 
      data : 
       JSON.stringify(
        { 
         "query" : { "match_all" : {} } 
        }), 
      dataType : 'json', 
      async: false, 
      success: function(data){ 
       json = data; 
      } 
     }) 



var jdata = {}; 
jdata.cols = [ 
    { 
     "id": "", 
     "label": "Lane", 
     "type": "string" 
    }, 
    { 
     "id": "", 
     "label": "Routes", 
     "type":"number" 
    } 
]; 
jdata.rows = [ 
    { 
     "c": [ 
      { 
       "v": json.hits.hits[0]._source.lane 
      }, 
      { 
       "v": json.hits.hits[0]._source.routes 
      } 
     ] 
    } 
];

來源

2013-04-09 16:28:16

請勿使用'async：false'！ – Bergi 2013-04-09 16:36:32

未使用'async：false'，代碼無法正確執行。 – 2013-04-09 22:29:12

當然，你需要使用回調，但是，你應該使用ajax！ – Bergi 2013-04-10 11:50:34

在ajax調用中添加成功處理程序。另外，作爲菲利克斯國王指出，google.visualization.DataTable期待一個JavaScript對象 - 不是一個字符串

所以將所有這些代碼

var jdata = '{ "cols": [{"id":"", "label":"lane", "type": "string"},' + '{"id": "", "label": "routes", "type": "number"}],' + '"rows":[{"c": [{"v":' + json.hits[0].hits[0]._source.lane + '},{"v":' + json.hits[0].hits[0]._source.routes + '}]}]'; 
var data = new google.visualization.DataTable(jdata); 
var chart = new google.visualization.PieChart(document.getElementById('piechart_div')); 
chart.draw(data, {is3D: true, title: 'Multi Routes per Lane', width: 600, height: 440});

到成功處理程序

$.ajax({ 
    url: 'http://localhost:9200/wcs/routes/_search?pretty=true' 
    , type: 'POST' 
    , data : 
      JSON.stringify(
       { 
       "query" : { "match_all" : {} } 
      }) 
    , dataType : 'json' 
    , success : function (json){ // <-- json = javascript object since you set dataType to 'json' 
     // your object to pass to DataTable 
     var jdata = { 
      "cols": [{ 
       "id": "", 
       "label": "lane", 
       "type": "string" 
      }, { 
       "id": "", 
       "label": "routes", 
       "type": "number" 
      }], 
      "rows": [{ 
       "c": [{ 
        "v": json.hits[0].hits[0]._source.lane 
       }, { 
        "v": json.hits[0].hits[0]._source.routes 
       }] 
      }] 
     }; 

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

     var chart = new google.visualization.PieChart(document.getElementById('piechart_div')); 
     chart.draw(data, {is3D: true, title: 'Multi Routes per Lane', width: 600, height: 440}); 
    } 
});

來源

2013-04-09 14:50:53

將JSON文檔格式化爲可視化所需的規格

回答

相關問題