0

我正在尝试根据 Elastic Search 中的数据创建 Google Chart。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>
4

2 回答 2

0

在 ajax 调用中添加成功处理程序。同样正如 Felix King 指出的那样， 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-09T14:50:53.067 回答
0

能够使用以下代码执行此操作（感谢 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-09T16:28:16.097 回答