ホ−ム » クラスリファレンス » ZDC.Graph

ZDC.Graph

指定したデータのグラフを地図上に描画します。
※)shape.js, D3.jsが必要です。
※)別途、プラグインをインクルードする必要があります。こちらから取得して下さい。

実装例

コンストラクタ

ZDC.Graph(map, options)

引数プロパティプロパティタイプデフォルト説明
map--ZDC.Map-表示する地図を指定
optionsdatadataUrlstring-表示データのURL
※クロスドメイン制約有り
asyncbooleantruetrue:リクエストを非同期で行う
false:リクエストを同期で行う
※dataUrlが設定されている場合のみ有効
funcfunction-グラフ描画後に実行するコールバックメソッド。戻り値にHTTPステータスコードを返却する
※asyncがtrueの場合のみ有効
dataStringstring-表示データの文字列
※dataUrlが設定されていない場合のみ有効
datumstringTOKYO地図に重畳するグラフの測地系を指定
encstringUTF8表示データの文字コード
SJIS : SHIFT-JIS
UTF8 : UTF-8
EUC : EUC-JP
graphtypestringpiepie:円グラフ
bar:棒グラフ(横)
column:棒グラフ(縦)
line:折れ線グラフ
area:エリアグラフ
clickablebooleanfalsetrue:グラフ地点にマーカを表示する。マーカをクリックすることでグラフを表示する
false:複数のグラフを表示する
offsetZDC.PixelZDC.Pixel(0, 0) (※1)オフセット値
※clickableがtrueの場合のみ有効
legend凡例オブジェクト-表示する凡例についての設定情報
※clickableがfalseの場合かつ、typeがpieの場合のみ有効

※1 ・・・ デフォルトの位置は吹き出しの先端が指定した緯度経度となります。

表示データの例(csv)

駅名,緯度,経度,徒歩,路線バス,自転車,タクシー,乗用車,軽乗用車,その他
新松戸,35.82442,139.92081,100,100,100,100,100,100,100
新宿西口,35.69382,139.69901,200,300,516,188,222,62,337
品川シーサイド,35.61068,139.74996,300,200,126,312,188,222,62
光が丘,35.75848,139.62997,378,300,200,126,312,188,222
航空公園,35.79774,139.46627,126,378,300,200,126,312,188
草加,35.82762,139.80339,516,188,378,300,200,126,312
八王子,35.65527,139.3401,222,516,188,378,300,200,126
あざみ野,35.56805,139.55354,312,337,516,188,378,300,200
小田急永山,35.62959,139.44916,62,312,337,516,188,378,300
東京ディズニーランド,35.6357,139.87802,501,62,312,337,516,188,378


1行目の3列目までは無視されます。
1行目の4列目以降はグラフの内訳です。
2行目以降の最初の列はラベルの名称です。
2行目以降の2列目は緯度、3列目は経度です。


void setOptions(options)

オプションを設定します。

引数タイプ説明
optionsobjectコンストラクタのoptionsと同じ

void redraw()

setOptionsの実行結果を反映して再描画します。


array(ZDC.Marker) getMarkers()

グラフ地点に表示されたマーカを配列で取得できます。


void removeAllWidget()

地図上に重畳された全てのウィジット削除します。


void hidden()

グラフを非表示にします。


void visible()

グラフを表示します。



関連事項

凡例オブジェクト

プロパティタイプデフォルト説明
posポジションオブジェクトZDC.TL(10, 10)凡例の配置位置
※eachがfalseの場合のみ有効
eachbooleantruetrue:各グラフに凡例を表示する
false:各グラフで共通の凡例を表示する