Javascript 使用JSON生成Google图表

我正在开发一个web应用程序，它从servlet检索JSON数据，并使用它生成图表。我成功地以谷歌图表兼容的json格式检索了必要的json文件，但无法生成图表

谷歌图表的jsbin位于以下链接中：

数据变量应该使用JSON生成，我在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();
            }

alert（JSON.stringify（dat））将警报作为

{“cols”：[{“label”：“name”，“type”：“string”}，{“label”：“count”，“type”：“number”}]，“rows”：[{“c”：[{“v”：“name”}，{“v”：1}]}，{“c”：[{“v”：“Name1”}，{“v”：2}，{“c”：[{“v”：“Name2}，{“v”：3}，{“c”：[{“v”：“v”：“Name4”}，{“v”：1}]

这是一个有效的JSON

---

如何像在jsbin中一样使用这些数据生成图表？

google.setOnLoadCallback（）

设置一个回调函数，以便在加载google Visualization API时执行，因此

google.load

需要从前端显式加载。我回忆起最近我做这些的时候。我的建议是将

google.load

和

drabsic（）

从

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..
        }
    });

 });

---

更新：您只需指定

包：['corechart']

，它将定义最基本的图表，包括

饼图

、

条形图

、和

列

图表。

最终得到了这个问题的答案。 删除了google.setOnLoadCallback（）并从ajax调用本身调用了drausic（）函数。不知何故，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>

load（'visualization'，'1'，'{
软件包：['corechart']
});
功能（d）{
var data=new google.visualization.DataTable（d）；
变量选项={
标题：“样本数据”，
哈克斯：{
标题：“姓名”
},
言辞：{
标题：“伯爵”
},
宽度：600，
身高：240
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}  
$（函数（）{
$（“#dd”）.更改（函数（）{
if（$（this.val（）！='null'））
{
$.ajax({
网址：“Serv”，
数据：{dd1:$（this.val（）}，
数据类型：“json”，
contentType:'应用程序/json'，
成功：功能（结果）{
结果；
},
完成：函数（）{
//不管怎样。。
}
})  ;
}
其他的
{
$（“#chart_div”）.empty（）；
警报（“请选择”）；
}
});
});

您能告诉我为什么要在ajax调用的

success

中创建

drabsic（）

？或者更清楚地说，如果设置为在页面加载时执行，为什么要使用

ajax

调用中的所有内容？这应该发生在与下拉选择链接的事件上。我删除了大部分代码，基本上只剩下一些重要的东西。不管怎样，我需要一个ajax调用来从jsp调用servlet，对吗？好吧，这很酷，在不影响您的需求的情况下，我已经发布了我的响应。看看这是否对你有帮助。什么都没有发生，顺便说一句，为什么会发生什么事（没有粗鲁的事。只是为了知识！！）。在DrubSic函数中提醒d确实会得到相同的json文件，但仍然没有显示内容我没有在

DrubSic（）

中对参数

d

做任何操作，所以不要期望在那里发生任何魔法。哦，我明白了，与其使用

包：['corechart'，'bar']

，不如使用

包：['corechart']

将处理所有图表类型。检查我的更新。不，什么也没发生。它在jsbin中工作，在这里也应该工作。我甚至尝试了

drabsic（result）

而不是字符串化，但仍然没有输出。

<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>