一款PHP+jQuery完成的中国舆图热点数据统计展现实例,当鼠标滑动到舆图指定省分区域,正在弹出的提醒框中显示对应省分的数据信息。
起首正在页面中加一个div#tip,用来展现舆图信息的提醒框以及#map用来天生舆图。
<div id="map"></div> <div id="tip"></div>
接着咱们引入jQuery库、raphael.js及chinamapPath.js(中国舆图数据)
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="chinamapPath.js"></script>
经过挪用raphael绘制出中国舆图,而后载入统计数据,因为舆图区块小,咱们没有正在舆图载入的时分就将数据显示正在舆图区块上了,咱们经过鼠标交互完成将数据信息更好的展现给用户。
当鼠标滑向省分区块时,经过e.clientX以及e.clientY定位鼠标坐标,而后经过jquery的css()办法定位提醒框div#tip,而且将对应省分的的称号以及活泼用户数加到提醒框里并展示进去,代码以下:
$(function() { $.get("json.php", function(json) { var data = string2Array(json); var flag; var arr = new Array(); for (var i = 0; i < data.length; i++) { var d = data[i]; if (d < 100) { flag = 0; } else if (d >= 100 && d < 500) { flag = 1; } else if (d >= 500 && d < 2000) { flag = 2; } else if (d >= 2000 && d < 5000) { flag = 3; } else if (d >= 5000 && d < 10000) { flag = 4; } else { flag = 5; } arr.push(flag); } var colors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"]; var R = Raphael("map", 600, 500); //挪用绘制舆图办法 paintMap(R); var i = 0; for (var state in china) { china[state]['path'].color = Raphael.getColor(0.9); (function(st, state) { var prodata = data[i]; var fillcolor = colors[arr[i]]; st.attr({ fill: fillcolor }); //填充布景色 xOffset = 70; yOffset = 180; st.hover(function(e) { st.animate({ fill: "#fdd", stroke: "#eee" }, 500); R.safari(); $("#tip").css({ "top": (e.clientY - xOffset) + "px", "left": (e.clientX - yOffset) + "px" }).fadeIn("fast").html("<h4>" + china[state]['name'] + "</h4><p>活泼用户数:" + prodata + "</p>"); }, function() { st.animate({ fill: fillcolor, stroke: "#eee" }, 500); R.safari(); $("#tip").hide(); }); st.mousemove(function(e) { $("#tip").css({ "top": (e.clientY - xOffset) + "px", "left": (e.clientX - yOffset) + "px" }); R.safari(); }); })(china[state]['path'], state); i++; } }); }); function string2Array(string) { eval("var result = " + decodeURI(string)); return result; }
更多相干php常识,请拜访php教程!
以上就是PHP+jQuery完成中国舆图热点数据统计展现成果的具体内容,更多请存眷资源魔其它相干文章!
标签: php php开发教程 php开发资料 php开发自学 jQuery
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
抱歉,评论功能暂时关闭!