1
안녕하십니까. 나는 필요한 정보를 검색하고 Google Charts를 사용하여 그래프로 표시하기 위해 MySQL 데이터베이스에 연결하는 Java의 동적 웹 프로젝트를 만들려고합니다. 이 경우 테이블 게시물에서 두 개의 카운트 값을 얻으려고합니다. 성별 (남성 또는 여성) 별 게시물 수 및 위치 별 게시물 수 (동쪽인지 서쪽인지)를 얻으려고합니다. 저는이 API에 비교적 익숙하지 않아 성별로 게시 횟수가있는 단일 파이 차트를 표시하여 연습했으며 작동합니다. 성별이 남녀인지 여부에 관계없이 게시물 수를 표시합니다. 그러나 두 개의 차트 (성별로 게시 횟수가있는 하나의 원형 차트와 위치별로 게시물 수가있는 하나의 기둥 형 차트)를 표시하려고하면로드되지만 전체 정보는 표시되지 않습니다. 두 성별에 대한 게시물 수와 두 위치에 대한 게시물 수를 얻는 대신 하나의 성별 ("남성")에 대한 게시물 수와 한 위치에 대한 게시물 수 ("서부") 만 얻습니다. 여기 JSP x Google 차트 X MySQL : 여러 차트가 전체 정보를 표시하지 않음
내가 얻기 위해 노력하고있어 보여 그 사진 그리고 내가 대신 무엇을 얻을 : https://s31.postimg.org/40c3skgmz/output.jpg
내가 그것을 모두 내가 필요한 정보와 거기에 아무 문제를 검색 확인하기 위해 JSP 코드에서 일부 인쇄 라인을 추가 . 그러나, HTML에서 데이터를 전달할 때는 그렇지 않습니다.
여기합니다 (JSON 라이브러리를 사용하여) 데이터를 검색하기위한 JSP 코드는 다음과 같습니다
<%@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)
먼저 ... 이런 식으로 뭔가를하려고합니다. 당신이 제안한 변경 내용을 적용했는데 결과는 그대로입니다 ... =/ –
당신은'JSON.stringify (data)'를 공유 할 수 있습니까? – WhiteHat
"console.log (JSON.stringify (data));"행을 삽입했습니다. "queryObject = eval ('('+ 'JSON.stringify (data) +') ');)" 하지만 예상대로 객체가 Eclipse 콘솔에 표시되지 않습니다. 내가 놓친 게 있니? 브라우저에서 –