-1

私は円グラフのアプリケーションを開発しています(ここから助けてください)。現在、そのテーブルにマウスオーバー/ホバーすると、他の列の値を含む別のテーブルが表示されるように構築しています[テーブル名：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>

私は多くのサイトを見て、AJAX、PHPの助けを借りてそれができることを理解していますが、私はJSPを使用しています。マウスオーバーで別のテーブルを表示して、各行の関連詳細を表示したいと考えています。

だから何か提案...

4

1 に答える 1

1

問題を小さな部分に分割します。マウスオーバー部分は JavaScript を使用して実行できます。これを書いて、(JS で定義した) いくつかのデータを表示させます。その部分が完了したら、テスト データを含む JavaScript 部分を更新して、AJAX を使用して実際にライブ データを取得できます。

AJAX は使用できる手法であり、サーバー側言語で定義する必要があるものではありません。機械可読形式 (ヒント: JSON ) でデータを返すサーブレットはすべて、JavaScript の一部と、AJAX によって呼び出すことができます。

于 2012-06-28T08:58:18.913 に答える