Javascript JSP x Google Charts x MySQL：多个图表不显示全部信息_Javascript_Html_Mysql_Jsp_Google Visualization

Javascript JSP x Google Charts x MySQL：多个图表不显示全部信息

javascript html mysql jsp google-visualization

Javascript JSP x Google Charts x MySQL：多个图表不显示全部信息,javascript,html,mysql,jsp,google-visualization,Javascript,Html,Mysql,Jsp,Google Visualization,早上好。我正在尝试用Java创建一个动态web项目，该项目连接到MySQL数据库，以检索我需要的某些信息，并使用Google图表将其显示在图形中。在本例中，我试图从表post中获取两个计数值：按性别（男性或女性）划分的post数量和按位置划分的post数量（东部或西部）。因为我对这个API比较陌生，所以我通过显示一个带有按性别统计的帖子的饼图进行了练习，效果很好。它显示职位的数量，无论性别是男性还是女性。但是，当我尝试显示两个图表时（一个饼图按性别显示帖子数量，另一个柱状图按位置显示帖子数量），

早上好。我正在尝试用Java创建一个动态web项目，该项目连接到MySQL数据库，以检索我需要的某些信息，并使用Google图表将其显示在图形中。在本例中，我试图从表post中获取两个计数值：按性别（男性或女性）划分的post数量和按位置划分的post数量（东部或西部）。因为我对这个API比较陌生，所以我通过显示一个带有按性别统计的帖子的饼图进行了练习，效果很好。它显示职位的数量，无论性别是男性还是女性。但是，当我尝试显示两个图表时（一个饼图按性别显示帖子数量，另一个柱状图按位置显示帖子数量），它们会加载，但不会显示全部信息。为了得到两种性别的职位数量和两个地点的职位数量，我只得到一种性别（“男性”）的职位数量和一个地点（“西部”）的职位数量

下面的图片说明了我试图获得的以及我得到的：

我在JSP代码中添加了一些打印行，以确保它检索到我需要的所有信息，并且没有问题。但是，当我在HTML中传递数据时，情况并非如此

以下是用于检索数据的JSP代码（使用JSON库）：

显示页面的HTML代码：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Opinion Chart Multi</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
        google.load("visualization", "1.0", {packages:["corechart", "bar"], callback:drawCharts});
        //google.setOnLoadCallback(drawCharts);

            var queryObject="";
            var queryObjectLen="";
            $.ajax({
                url : 'getdata.jsp',
                dataType:'json',
                success : function(data) {
                    queryObject = eval('(' + JSON.stringify(data) + ')');
                    queryObjectLen = queryObject.opdetails.length;
                },
                    error : function(xhr, type) {
                    alert('server error occoured')
                }
            });

          function drawCharts() {

           var data = new google.visualization.DataTable();
                data.addColumn('string', 'gender');
                data.addColumn('number', 'gender_count');
                for(var i=0;i<queryObjectLen;i++)
                {
                    var gender = queryObject.opdetails[i].gender;
                    var count = queryObject.opdetails[i].count;
                    data.addRows([
                        [gender,parseInt(count)]
                    ]);
                }

           var data2 = new google.visualization.DataTable();
                data2.addColumn('string', 'location');
                data2.addColumn('number', 'location_count');
                for(var i=0;i<queryObjectLen;i++)
                {
                    var location = queryObject.opdetails[i].location;
                    var count2 = queryObject.opdetails[i].count2;
                    data2.addRows([
                        [location,parseInt(count2)]
                    ]);
                }

                var options = {
                    title: 'Posts By Gender',
                };

                var options2 = {
                        title: 'Posts by Location',
                        colors: ['green','yellow'],
                        hAxis: {
                            title: 'Location'
                        },
                        vAxis: {
                            title: 'No. of Posts'
                        }
                 };

  var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
  chart1.draw(data,options);

  var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
  chart2.draw(data2,options2);
 }        
    </script>
   </head>
  <body>

    <table class="columns">
      <tr>
        <td><div id="chart1"></div></td>
        <td><div id="chart2"></div></td>
      </tr>
    </table>            

 </body>
</html>


多功能意见图
load（“可视化”、“1.0”{packages:[“corechart”、“bar”]，回调：drawCharts}）；
//setOnLoadCallback（绘图图）；
var queryObject=“”；
var queryObjectLen=“”；
$.ajax({
url:'getdata.jsp'，
数据类型：'json'，
成功：功能（数据）{
queryObject=eval（'（'+JSON.stringify（data）+'）；
queryObjectLen=queryObject.opdetails.length；
},
错误：函数（xhr，类型）{
警报（'occoured'服务器错误）
}
});
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'gender'）；
data.addColumn（'number'，'gender_count'）；
对于（var i=0；i最有可能的情况是，drawCharts
在数据准备就绪之前被调用
也许试试这样的
google.load("visualization", "1.0", {
  callback: function () {
    var queryObject="";
    var queryObjectLen="";
    $.ajax({
      url: 'getdata.jsp',
      dataType: 'json',
      success: function (data) {
        queryObject = eval('(' + JSON.stringify(data) + ')');
        queryObjectLen = queryObject.opdetails.length;

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'gender');
        data.addColumn('number', 'gender_count');
        for(var i=0;i<queryObjectLen;i++) {
          var gender = queryObject.opdetails[i].gender;
          var count = queryObject.opdetails[i].count;
          data.addRows([
            [gender,parseInt(count)]
          ]);
        }

        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'location');
        data2.addColumn('number', 'location_count');
        for(var i=0;i<queryObjectLen;i++) {
          var location = queryObject.opdetails[i].location;
          var count2 = queryObject.opdetails[i].count2;
          data2.addRows([
            [location,parseInt(count2)]
          ]);
        }

        var options = {
          title: 'Posts By Gender',
        };

        var options2 = {
          title: 'Posts by Location',
          colors: ['green','yellow'],
          hAxis: {
            title: 'Location'
          },
          vAxis: {
            title: 'No. of Posts'
          }
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
        chart1.draw(data,options);

        var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
        chart2.draw(data2,options2);
      },
      error: function (xhr, type) {
        alert('server error occoured')
      }
    });
  },
  packages:["corechart"]
});

google.load（“可视化”、“1.0”{
回调：函数（）{
var queryObject=“”；
var queryObjectLen=“”；
$.ajax({
url:'getdata.jsp'，
数据类型：“json”，
成功：功能（数据）{
queryObject=eval（'（'+JSON.stringify（data）+'）；
queryObjectLen=queryObject.opdetails.length；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'gender'）；
data.addColumn（'number'，'gender_count'）；
对于（var i=0；i最有可能的情况是，drawCharts
在数据准备就绪之前被调用
也许试试这样的
google.load("visualization", "1.0", {
  callback: function () {
    var queryObject="";
    var queryObjectLen="";
    $.ajax({
      url: 'getdata.jsp',
      dataType: 'json',
      success: function (data) {
        queryObject = eval('(' + JSON.stringify(data) + ')');
        queryObjectLen = queryObject.opdetails.length;

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'gender');
        data.addColumn('number', 'gender_count');
        for(var i=0;i<queryObjectLen;i++) {
          var gender = queryObject.opdetails[i].gender;
          var count = queryObject.opdetails[i].count;
          data.addRows([
            [gender,parseInt(count)]
          ]);
        }

        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'location');
        data2.addColumn('number', 'location_count');
        for(var i=0;i<queryObjectLen;i++) {
          var location = queryObject.opdetails[i].location;
          var count2 = queryObject.opdetails[i].count2;
          data2.addRows([
            [location,parseInt(count2)]
          ]);
        }

        var options = {
          title: 'Posts By Gender',
        };

        var options2 = {
          title: 'Posts by Location',
          colors: ['green','yellow'],
          hAxis: {
            title: 'Location'
          },
          vAxis: {
            title: 'No. of Posts'
          }
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
        chart1.draw(data,options);

        var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
        chart2.draw(data2,options2);
      },
      error: function (xhr, type) {
        alert('server error occoured')
      }
    });
  },
  packages:["corechart"]
});

google.load（“可视化”、“1.0”{
回调：函数（）{
var queryObject=“”；
var queryObjectLen=“”；
$.ajax({
url:'getdata.jsp'，
数据类型：“json”，
成功：功能（数据）{
queryObject=eval（'（'+JSON.stringify（data）+'）；
queryObjectLen=queryObject.opdetails.length；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'gender'）；
data.addColumn（'number'，'gender_count'）；
对于（var i=0；i首先，感谢您的回复。我应用了您建议的更改，输出保持不变…=/you shareJSON.stringify（data）
？我在“queryObject=eval”（“+JSON.stringify（data）+”）之后插入了行“console.log（JSON.stringify（data））；”但该对象并没有像我预期的那样显示在Eclipse控制台中。我是否遗漏了什么？检查浏览器中的控制台？我刚刚发现了问题所在。显然，这与我的“getdata.jsp”文件有关：JSONObject“opObj”应该在结果语句周期内初始化。这就是为什么传递的JSONObject只存储表的最后一行。无论如何，谢谢！=）首先，谢谢你的回复。我应用了你建议的更改，输出保持不变…=/你能共享JSON.stringify（数据）
？我插入了“console.log”行吗（JSON.stringify（data））；“紧接着”queryObject=eval（“（“+JSON.stringify（data）+”）；“但是对象并没有像我预期的那样显示在Eclipse控制台中。我缺少什么吗？在浏览器中检查控制台？我刚刚发现了问题所在。显然，这与我的“getdata.jsp”文件有关：JSONObject“opobject”应该在结果语句周期内初始化。这就是为什么传递的JSONObject只存储表的最后一行。无论如何，谢谢！=）