人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>以下の何かがダブッているのが原因のようですが、どの部分を変更すれば良いか分かりません。

ご教示いただけますか?


●質問者: ozaki
●カテゴリ:インターネット ウェブ制作
✍キーワード:API Google JavaScript ソース プログラム
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●60ポイント ベストアンサー

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'));
◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ