Question

我正在开发一个Web应用程序，它从servlet检索JSON数据并使用它来生成图表。我成功地以符合Google Chart的JSON格式检索必需的json文件，但无法生成图表。

google图表的jsbin位于以下链接：http://jsbin.com/hofaqidape/1/watch?html,js,output

应该使用JSON生成data var，我在servlet中执行以下操作

response.setContentType("application/json");
            String json;
            newClass s =new newClass();
            List<newClass> classes = new ArrayList<newClass>();
            s.setCount(1);
            s.setName("Name");
            classes.add(s);
            s =new newClass();
            s.setCount(2);
            s.setName("Name1");
            classes.add(s);
            s =new newClass();
            s.setCount(3);
            s.setName("Name2");
            classes.add(s);
            s =new newClass();
            s.setCount(1);
            s.setName("Name4");
            classes.add(s);
            json="{ cols :[ {  label :  name  ,  type :  string },{ label :  count  ,  type :  number }], rows :[";
            String ss;int y;
            for(newClass class1:classes)
            {
                ss=class1.getName();
                y=class1.getCount();
                json+="{ c : [{ v : "+ss+" },{ v : "+y+"}]},";
            }
            json=json.substring(0, json.length()-1);
            json+="]}";
            JSONObject js=null;
            try {
                js = new JSONObject(json);
            } catch (ParseException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
            try {
                out.print(js);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

在html方面我有我的图表生成的foll代码：

$(document).ready(function(){
            $.ajax({
                    url : "Serv",
                    dataType: 'json',
                     contentType: 'application/json',
                    success : function(result) {
                          var dat=result;
                          alert(JSON.stringify(dat));
                          google.load('visualization', '1', {
                                packages: ['corechart', 'bar']
                            });
                            google.setOnLoadCallback(drawBasic);

                            function drawBasic() {

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

                                var options = {
                                    title: 'Motivation Level Throughout the Day',
                                    hAxis: {
                                        title: 'Name'
                                    },
                                    vAxis: {
                                        title: 'Count'
                                    }
                                };

                                var chart = new google.visualization.ColumnChart(
                                document.getElementById('chart_div'));

                                chart.draw(data, options);
                            }

                    },
            complete: function()
            {
                alert('done');
            }
                });
        });

alert（JSON.stringify（dat））将警报显示为

{ “COLS”：[{ “标记”： “姓名”， “类型”： “串”}，{ “标签”： “计数”， “类型”： “号码”}]， “行”： [{ “C”：[{ “v”： “姓名”}，{ “v”：1}]}，{ “C”：[{ “v”： “NAME1”}，{ “v”：2} ]}，{ “C”：[{ “v”： “名称2”}，{ “v”：3}]}，{ “C”：[{ “v”： “NAME4”}，{ “v”： 1}]}]}

这是一个有效的JSON。

如何使用此数据生成图表，就像我在jsbin中一样？

Answer 1

google.setOnLoadCallback()设置了一个回调函数，以便在加载Google Visualization API时执行，因此google.load需要从前面明确加载。我最近在研究它的时候正在回忆它。我的建议是将google.load和drawBasic()移到AJAX来电之外，并在success电话中使用它们，就像这样......

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

    function drawBasic(d) {
      var data = new google.visualization.DataTable(d);
      var options = {
         title: 'Motivation Level Throughout the Day',
         hAxis: {
            title: 'Name'
         },
         vAxis: {
            title: 'Count'
         }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    $.ajax({
        url : "Serv",
        dataType: 'json',
         contentType: 'application/json',
        success : function(result) {
          google.setOnLoadCallback(drawBasic(JSON.stringify(result)));
        },
        complete: function(){
           // whatever..
        }
    });

 });

更新：您只需指定packages: ['corechart']即可定义大多数基本图表，包括pie，bar和column图表

Answer 2

终于得到了这个问题的答案。删除了google.setOnLoadCallback（）并从ajax调用本身调用了drawBasic（）函数。不知怎的，setOnLoadCallback（）和$（document）.ready（）似乎并不存在。

工作代码：

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

    function drawBasic(d) {
     var data = new google.visualization.DataTable(d);
      var options = {
         title: 'Sample Data',
         hAxis: {
            title: 'Name'
         },
         vAxis: {
            title: 'Count'
         },
         width: 600,
         height: 240
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }  

                $(function(){
        $("#dd").change(function(){
            if($(this).val()!='null')
          {
                $.ajax({
            url : "Serv",
            data: {dd1:$(this).val()},
            dataType: 'json',
             contentType: 'application/json',
            success : function(result) {
              drawBasic(result);
            },
            complete: function(){
               // whatever..
            }
        })  ;
          }
            else
                {
                $("#chart_div").empty();
                alert('please select');
                }
        });
        });
    </script>

使用JSON生成Google Chart

2 个答案: