Google Visualization APIを使ってページを作っています。

http://www.withmama.info/study/kokomadedekita.html

ページには、<div>A</div><div id="nursery_res">と<div>B</div><div id="res"></div>以下に、Google Visualization API のJavascriptを2つ置いています(字数制限の関係でプログラムの全部を掲載できないので、お手数ですがソースを見てください)。ところが、1つしか表示されません。どちらかを削除する(例えば、<div>A</div><div id="nursery_res">以下)と、残ったものは表示されるのですが、2つとも同時に実行すると、1つしか表示されません。
<div>A</div>以下と<div>B</div>以下の何かがダブッているのが原因のようですが、どの部分を変更すれば良いか分かりません。

ご教示いただけますか?

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/02/11 10:08:05
  • 終了:2011/02/15 20:04:47

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/02/11 11:22:14

ポイント60pt

Using Visualizations - Google Chart Tools / Interactive Charts (aka Visualization API) - Google Code

Google Visualization APIメモ at HouseTect, JavaScript Blog

を参考にすると

複数の表示コントロールを使いたい場合は以下のように配列に複数入れると可能

となっているので、以下のようにする必要があります

google.load("visualization", "1", {packages:['table'], callback:packageLoaded});
↓
google.load("visualization", "1", {packages:['table','追加したいコントロール'], callback:packageLoaded});

さらに、現在のhandleResponse関数内で追加させたい場所の指定が#res固定なのでここも対策が必要です。追加したい表示コントロールの加工(handleResponse関数でやっていること)が'table'で同じであれば、簡易的に以下のようにすれば表示させることが出来ると思います。

var table = new google.visualization.Table(document.getElementById('res'));

var table = new google.visualization.Table(document.getElementById('res'));
↓
var table = new google.visualization.Table(document.querySelector('#res .google-visualization-table-table') ? document.getElementById('nursery_res') : document.getElementById('res'));
id:ozaki

さっそくのご教示ありがとうございます。がしかし、プログラムに詳しくないため、理解できそうにありません。もっと具体的にご教示いただければ助かるのですが・・・。

2011/02/11 12:45:05
  • id:Cherenkov
    あーごめんなさい。
    回答1のpackages云々は勘違いぽいです。

    var url=document.getElementById('res').innerHTML; ;
    で始まる<script>がありますが、これは#res用になっているので、もう一つ#nursery_res用の<script>を貼りつければ解決しませんか?
  • id:Cherenkov
    あー#nursery_res用もありましたね…。
    それぞれの<script>内でinitLoader関数やらloadPackage関数を2回実行しちゃってるから先に実行した分が初期化されちゃったみたいですね。
    簡単に対策するなら一つにまとめればいいと思います。
    サンプル書きました。
    http://jsfiddle.net/X5NH2/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません