javascript - JSP x 谷歌图表 X MySQL : Multiple Charts Not Displaying Entire Information-6ren

javascript - JSP x 谷歌图表 X MySQL : Multiple Charts Not Displaying Entire Information

转载作者：行者123 更新时间：2023-11-30 22:17:17

26

4

早上好。我正在尝试用 Java 创建一个动态 Web 项目，该项目连接到 MySQL 数据库以检索我需要的某些信息并使用 Google Charts 在图表中显示它。在这种情况下，我试图从表格帖子中获取两个计数值:按性别(男性或女性)分类的帖子数和按位置分类(东部或西部)的帖子数。因为我对这个 API 比较陌生，所以我通过显示一个饼图来练习，其中包含按性别分类的帖子数并且它有效。它显示帖子的数量，无论性别是男性还是女性。但是，当我尝试显示两个图表时(一个饼图按性别显示帖子数量，一个柱形图按位置显示帖子数量)，它们会加载但不会显示全部信息。 Instad 获取两种性别的帖子数量和两个位置的帖子数量，我只获得一种性别(“男性”)的帖子数量和一个位置(“西方”)的帖子数量。

这是一张图片，说明了我试图获得的东西以及我得到的东西:https://s31.postimg.org/40c3skgmz/output.jpg

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

这是用于检索数据的 JSP 代码(使用 JSON 库):

<%@page import="java.sql.*" %>
<%@page import="java.util.*" %>
<%@page import="org.json.JSONObject" %>

<%
    Connection con= null;
 try{
  Class.forName("com.mysql.jdbc.Driver").newInstance();
  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sentimentposts?autoReconnect=true&useSSL=false","root","root");

        ResultSet rs1 = null;
        ResultSet rs2 = null;

        List opdetails = new LinkedList();
        JSONObject responseObj = new JSONObject();

        String query1 = "select poster_gender, count(*) as gender_count from post group by poster_gender";
        PreparedStatement pstm1= con.prepareStatement(query1);

        String query2 = "select poster_location, count(*) as location_count from post group by poster_location";
        PreparedStatement pstm2= con.prepareStatement(query2);

           rs1 = pstm1.executeQuery();
           rs2 = pstm2.executeQuery();

           JSONObject opObj = new JSONObject();

        while (rs1.next()) {
            String gender = rs1.getString("poster_gender");
            System.out.println(gender);
            int count = rs1.getInt("gender_count");
            System.out.println(count);
            opObj.put("gender", gender);
            opObj.put("count", count);
        }

        while(rs2.next()){
            String location = rs2.getString("poster_location");
            System.out.println(location);
            int count2 = rs2.getInt("location_count");
            System.out.println(count2);
            opObj.put("location", location);
            opObj.put("count2", count2);
        }
    opdetails.add(opObj);
    responseObj.put("opdetails", opdetails);
    out.print(responseObj.toString());
    }
    catch(Exception e){
        e.printStackTrace();
    }finally{
        if(con!= null){
            try{
            con.close();
            }catch(Exception e){
                e.printStackTrace();
            }
        }
    }
 %>

显示页面的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>

最后，我使用的 SQL 表的格式:

表格:帖子

列:

消息 varchar(45),poster_age int(11)，poster_gender varchar(45),poster_location varchar(45)

最佳答案

最有可能的是，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"]
});

关于javascript - JSP x 谷歌图表 X MySQL : Multiple Charts Not Displaying Entire Information，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37855005/

26

4

0

文章推荐： c# - 动态设置文件名时未使用 NLog 创建日志文件

文章推荐： php - 如何在 laravel 框架中创建三元关系

文章推荐： mysql - 选择条件 1 在条件 2 之后的记录

jquery - 从文件输入中获取文件名或文本 multiple=multiple
我正在尝试设计我的输入:文件。以下 SO 问题让我完成了 95% 的任务。区别在于我使用的是 HTML5 multiple=multiple 属性。 How to style "input file"
Python Pandas : Store multiple time series of variable length for multiple attributes for multiple users
我一直在进行一项实验，其中多个调查参与者使用可穿戴技术聆听多首音乐来跟踪多条信息，两个例子是 BPM(心率)和 T(体温)。目标是衡量每首音乐(以用户反馈为特征)对人类情感的影响。目前，所有数据都
PHP : multiple inputs into other multiple inputs
我使用 jquery 添加/删除输入我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入我添加多个日期输入，并在此表中添加多个收入输入我
安卓工作室 : Multiple APKs for Multiple Modules
在 Android 中，有一种方法可以为项目中的所有模块生成签名的 APK。例如。我有以下项目 Project -- Library Module -- Module 1 -- Modul
mysql - 数据库设计: How to query multiple to multiple table
我有一个用于网站展示的系统。展览数据可能来自差异表中的多个数据。喜欢这个设计: Table [ExhibitionType] used for differentiate category. Ta
ios - 什么是最佳实践 : Multiple UIViews or Multiple UIViewControllers
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
iOS : Handle multiple uilocalnotification with multiple same viewcontroller
我正在使用 UILocalnotification...收到通知时，当应用程序处于事件模式时我打开 viewcontroller...但是如果同时收到多个通知...我如何打开多个 viewcontro
PHP/MySQL : UPDATE multiples values with multiples WHERE
我遇到的问题是一个策略浏览器游戏，它有 7 种类型的值。问题如下: 我在 $_POST 中获得了 7 个不同的值，包括从索引 unit_1 到索引 unit_7。这 7 个值是 0 到 20 之间的整
python : How to search for multiple paterns in multiple files
这个问题已经有答案了: Search Large Text File for Thousands of strings (3 个回答) 已关闭10 年前。我想在多个文件上“grep”多个正则表达式。
javascript - 大型数据集的单个 + SQL 查询搜索
我正在尝试根据进行搜索我通过运行代码从 select 中获取值: for($i=0;$i= '$age_from' AND users.user_age = '$age_from' AND u

首页

博学

6Ren·AI

商城

javascript - JSP x 谷歌图表 X MySQL : Multiple Charts Not Displaying Entire Information