|
json データを取得した後、まず json データを配列に変換し、json データ内の各州のアクティブ ユーザー数に応じて、グレードを分けます。 0 ～ 5 のレベルに分けられます。アクティブ ユーザーの数が多いほど、背景色が濃くなり、マップ上に表示されると、さまざまな地域のデータ レベルがはっきりとわかります。地図を描くときは、このサイトの以前の記事で raphael.js を使用して中国の地図を描く方法の紹介と基本的に同じです。異なる点は、各州が対応する色で塗りつぶされることです。コード:
| コードは次のとおりです |
コードをコピー |
$(関数(){
$.get("json.php",function(json){//データを取得する
var data = string2Array(json) //配列を変換します
;
変数フラグ
var arr = new Array();//レベルに対応する新しい配列を定義します
for(var i=0;i
var d = データ[i];
If(d
フラグ = 0;
}else if(d>=100 && d
フラグ = 1;
}else if(d>=500 && d
フラグ = 2;
}else if(d>=2000 && d
フラグ = 3;
}else if(d>=5000 && d
フラグ = 4;
}その他{
フラグ = 5;
}
arr.push(フラグ);
}
//色を定義します
var Colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];
//地図描画メソッドを呼び出す
var R = ラファエル("マップ", 600, 500);
ペイントマップ(R);
var textAttr = {
"fill": "#000"、
"font-size": "12px",
"カーソル": "ポインタ"
};
変数 i=0;
for (中国の州) {
china[state]['path'].color = Raphael.getColor(0.9);
(関数 (st, 状態) {
// 現在のグラフィックの中心座標を取得します
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//一部の地図テキストのオフセット座標を変更します
switch (中国[州]['名前']) {
ケース「江蘇省」:
xx += 5;
yy -= 10;
休憩
ケース「河北」:
xx -= 10;
yy += 20;
休憩
ケース「天津」:
xx += 10;
yy += 10;
休憩
ケース「上海」:
xx += 10;
休憩
ケース「広東省」:
yy -= 10;
休憩
ケース「マカオ」:
yy += 10;
休憩
ケース「香港」:
xx += 20;
yy += 5;
休憩
ケース「ガンス」:
xx -= 40;
yy -= 30;
休憩
ケース「陝西省」:
xx += 5;
yy += 10;
休憩
ケース「内モンゴル」:
xx -= 15;
yy += 65;
休憩
デフォルト:
//テキストを書く
中国[州]['テキスト'] = R.text(xx, yy, 中国[州]['名前']).attr(textAttr);
var fillcolor = Colors[arr[i]];// 対応する色を取得します
st.attr({fill:fillcolor});//背景色を塗りつぶす
st[0].onmouseover = function () {
st.animate({fill: "#fdd", ストローク: "#eee"}, 500);china[state]['text'].toFront();
R.safari();
st[0].onmouseout = function () {
st.animate({fill: fillcolor, ストローク: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
})(中国[州]['パス'], 州
);
;
}
});
});
上記のコードでは、var fillcolor = Colors[arr[i]]; を使用して対応するレベルの色の値を取得し、st.attr({fill:fillcolor}); を通じて対応する州ブロックに色を塗りつぶします。 。さらに、string2Array() 関数は文字列を配列に変換します。
コードは次のとおりです |
コードをコピー
関数 string2Array(string) { |
eval("var result = " + decodeURI(string));
結果を返します。
} |
|
このようにして、中国の地図を各省ごとに異なる背景色で見ることができ、異なる色に従って、各省間のアクティブユーザー数の違いを区別し、期待される目標を達成することができます。 |
ダウンロードアドレスの例: http://file.bKjia.c0m/upload/2013/12/chinamap-data.zip
|
http://www.bkjia.com/PHPjc/633107.html
www.bkjia.com
| true
