-1
piechart 응용 프로그램 (here에서 도움을 얻음)을 개발 중입니다. 이제 나는 mouseover/hover에서 그 테이블을 만들었습니다.이 테이블은 다른 컬럼 값을 포함하는 다른 테이블을 보여줍니다 [tablename : widgetsold; 열 : 위젯, 판매, 이익, 구매, ..] 페이지를 새로 고치지 않고 (jsp를 사용하는 것처럼). 기능 초기화() {데이터베이스에서 데이터를 가져 와서 페이지를 새로 고치지 않고 mouseover를 사용하여 테이블에 표시합니다.
// Get the canvas element in the page
canvas = document.getElementById('chart');
// Exit if the browser isn't canvas-capable
if (typeof canvas.getContext === 'undefined') return;
// Initialise some properties of the canvas and chart
canvasWidth = canvas.width;
canvasHeight = canvas.height;
centreX = canvasWidth/2;
centreY = canvasHeight/2;
chartRadius = Math.min(canvasWidth, canvasHeight)/2 * (chartSizePercent/100);
// Grab the data from the table,
// and assign click handlers to the table data cells
var currentRow = -1;
var currentCell = 0;
$('#chartData td').each(function() {
currentCell++;
if (currentCell % 2 != 0) {
currentRow++;
chartData[currentRow] = [];
chartData[currentRow]['label'] = $(this).text();
} else {
var value = parseFloat($(this).text());
totalValue += value;
value = value.toFixed(2);
chartData[currentRow]['value'] = value;
}
// Store the slice index in this cell, and attach a click handler to it
$(this).data('slice', currentRow);
$(this).hover(handleTableClick);
$(this).click(handleTableClick);
// Extract and store the cell colour
if (rgb = $(this).css('color').match(/rgb\((\d+), (\d+), (\d+)/)) {
chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ];
} else if (hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/)) {
chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ];
} else {
alert("Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'");
return;
}
});
// Now compute and store the start and end angles of each slice in the chart data
var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)
for (var slice in chartData) {
chartData[slice]['startAngle'] = 2 * Math.PI * currentPos;
chartData[slice]['endAngle'] = 2 * Math.PI * (currentPos + (chartData[slice]['value']/totalValue));
currentPos += chartData[slice]['value']/totalValue;
}
// All ready! Now draw the pie chart, and add the click handler to it
drawChart();
$('#chart').click (handleChartClick);
}
내 JSP 페이지 : 여기
JQuery와 있습니다 내가 AJAX의 도움으로 manysites를 통과하고 이해할 수있다<body>
<%
String s1= "A";
String s2= "B";
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/apps","root","root");
Statement stmt = con.createStatement();
String sql1="select count(case when device='"+s1+"' then 1 end) as A,count(case when device='"+s2+"' then 1 end) as B from user_management;";
ResultSet rs1 = stmt.executeQuery(sql1);
System.out.println(sql1);
%>
<div id="container">
<div class="wideBox">
<h1>Chart</h1>
</div>
<canvas id="chart" width="500" height="440"></canvas>
<table id="chartData">
<% while(rs1.next()){ %>
<tr>
<th>Team</th><th>Players</th>
</tr>
<tr style="color: #0DA068">
<td>A</td><td><%= rs1.getString(1)%></td>
</tr>
<tr style="color: #194E9C">
<td>B</td><td><%= rs1.getString(2)%></td>
</tr>
<% }
%>
</table>
</div>
</body>
, PHP는 할 수 있지만 JSP를 사용하고 있습니다. 각 행의 관련 세부 정보를 표시하기 위해 mouseover에서 다른 테이블을 표시하도록 구현하고 싶습니다.
모든 제안 사항 ...