1

アプリケーションにいくつかのタブがあり、各タブは jQuery load() 関数を介して異なるサブページをロードします。

私の問題は、一部のページに Google Visualization プラグインが含まれており、これらが機能しないことです。

私の最初のアプローチは、読み込まれるサブページに Visualization API の JavaScript を配置することでしたが、うまくいきませんでした。

私の 2 番目のアプローチは、視覚化が行われるはずの場所に div を挿入してから、この div に入力するスクリプト (以前に定義したもの) を呼び出すことでした。

ビジュアライゼーションを生成するスクリプトは次のとおりです。

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  data.addRows([
     <?php echo /* raw data outputted by generating functions */ ?>
    ]);


  var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
  chart.draw(data, {
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized',
'displayZoomButtons': false
  });
}

上記のスクリプトを呼び出すために使用するスクリプトを次に示します (タブがクリックされたとき)。

$('#loadarea').load('tab1.php');
drawChart();

また、これは関連している可能性があります: ドキュメントの冒頭で、jQuery を使用してページ上の他のスペースをプリロードします。

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});

ありがとう、

4

1 に答える 1

5

これには次の 2 つの問題がありました。

  1. google.setOnLoadCallback(drawChart)関数を呼び出していたので、それを取り除きました。

  2. スクリプトはロードされる前に を埋めようとしていたため、タブ変更スクリプト内にdiv関数呼び出しを追加しました。drawChart()

    $('#loadarea').load('tab1.php', function() { drawChart(); });

これで動作します。

于 2010-04-09T22:03:00.517 に答える