Question

我正在开发一个饼图应用程序（从here获得帮助）。现在我正在构建鼠标悬停/悬停到该表，它将显示另一个包含其他列值的表[suppose tablename：widgetsold; column：Widget，Sales，Profit，Purchase，..]，无需刷新页面（因为我使用的是jsp）。

这里是jquery：function init（）{

// 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页面：

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

我已经通过manysites了解，在AJAX的帮助下，PHP可以完成，但我正在使用JSP。我想在mouseover上实现show另一个表来显示每行的相关细节。

所以任何建议......

Answer 1

在小部件中解决您的问题。鼠标悬停部分可以使用JavaScript完成。写下这个，让它显示一些数据（你在JS中定义）。完成该部分后，您可以使用AJAX更新包含测试数据的JavaScript部分以实际获取实时数据。

AJAX是一种可以使用的技术，而不是必须在服务器端语言中定义的技术。任何以机器可读格式返回数据的servlet（提示：JSON）都可以通过一段JavaScript和voilá：AJAX调用。

从数据库中获取数据并使用鼠标悬停在表中显示它而不刷新页面

1 个答案: