Google ゲージ チャートのビジュアライゼーションをサイトに統合する際に問題が発生しています。彼らが与えるコード例は次のとおりです。
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
ID chart_div を持つ div が本体にある場合、このコード自体は正常に機能します。ただし、私のサイトの各ページは、loadandsetactive を使用して ajax によって呼び出され、「静的」ヘッダーの下のコンテンツ div に読み込まれます。これらのページのいずれかのヘッドに同じコードを入力すると、ロードに失敗します。エラー、空白のチャート、またはスクリプトがロードを試みたことを示すその他の兆候はありません。ページがコンテンツ div に読み込まれる方法の例は次のとおりです。
<li class="menuItem" id="mypage">
<a href="#" onclick="loadAndSetActive('mypage.html', '#content', '#mypage');" >
<img src="myimage.png" width="100%" height="auto"/>My Page</a></li>
ページは、ヘッダーの下の前述のコンテンツ div に読み込まれます。サイトはほぼ完成していますが、このゲージを機能させることができないようです。どんな助けでも大歓迎です。
編集: 明確にするために、ユーザーがログインすると、ajax 呼び出しにより、div にグラフを描画しようとしているダッシュボードが自動的に読み込まれます。mypage は、独自のタグなどを含む完全な html ファイルです。残念ながら、私の PHP と HTML/CSS は、私の ajax と jquery よりもはるかに優れています。