-1

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

这是jquery：函数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>

我已经浏览了许多站点并了解到在 AJAX 的帮助下，PHP 可以完成，但我正在使用 JSP。我想实现在鼠标悬停时显示另一个表以显示每一行的相关详细信息。

所以任何建议...

4

1 回答 1

1

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

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

于 2012-06-28T08:58:18.913 回答