Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail for you "how to use php and jquery to achieve map regional data statistics display data", the content is detailed, the steps are clear, and the details are handled properly. I hope that this "how to use php and jquery to achieve map regional data statistics display data" article can help you solve your doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

Effect picture:

HTML

First of all, load the raphael.js library file and the chinamapPath.js path information file in the head section, this article will not repeat it, the only difference is that you need to add a div#tip in the body to display the map information prompt box.

The copy code is as follows:

JQuery

By calling raphael to draw the map of China, and then loading the statistical data, because the map block is small, we do not display the data on the map block when the map is loaded, we can better display the data information to the user through mouse interaction. When the mouse is over the province block, use e.pageX and e.pageY to locate the mouse coordinates, then use the css () method of jquery to locate the prompt box div#tip, and add the name of the corresponding province and the number of active users to the prompt box and display it. Please see the code:

$(function () {$.get ("json.php", function (json) {. / / the code is omitted here some var iTunes; for (var state in china) {china [state] ['path']. Color = Raphael.getColor (0.9); (function (st, state) {var prodata = data [I]; var fillcolor = Colorr [I]] St.attr ({fill:fillcolor}); / / fill background color xOffset = 70; yOffset = 180; st.hover (function (e) {/ / mouse over st.animate ({fill: "# fdd", stroke: "# eee"}, 500); R.safari () $("# tip"). Css ({"top": (e.pageY-xOffset) + "px", "left": (e.pageX-yOffset) + "px"}) .fadeIn ("fast") .html ("" + china [state] ['name'] + "

Active users: "+ prodata+"

");}, function () {/ / mouse away from st.animate ({fill: fillcolor, stroke:" # eee "}, 500); R.safari (); $(" # tip ") .hide ();}) St.mousemove (function (e) {/ / mouse movement $("# tip") .css ({"top": (e.pageY-xOffset) + "px", "left": (e.pageX-yOffset) + "px"}); R.safari ();});}) (path'] ['path'], state); iTunes;}}) });

As can be seen in the above code, when the hover () mouse of jQuery is slid to the province block, the pop-up prompt box is called, and the data is loaded and displayed in the prompt box. What is noteworthy is that we also need to add an effect, that is, when the mouse moves mousemove () over the province block, we should also call the prompt box to follow the mouse, otherwise the position of the prompt box will not change when the mouse is slipped over a province block. This will affect the experience, and small changes can improve the user experience.

Finally, if you need to customize the effect of the prompt box, you can set the CSS style of the prompt box. The simple CSS code in this example is as follows:

# tip {position:absolute; width:180px; border:1px solid # d3d3d3; background:#fff;display:none;-moz-border-radius:5px;-webkit-border-radius:5px; overflow:hidden; border-radius:5px;-moz-box-shadow:1px 1px 2px rgba);-webkit-box-shadow:1px 1px 2px rgba (0meme 0penny .2); box-shadow:1px 1px 2px rgba (0meme 0meme 0meme.2);} # tip h5 {height:28px; line-height:28px Padding-left:6px; background:#f0f0f0} # tip p {line-height:24px; padding:2px 4px} read this article, "how to use php and jquery to achieve map regional data statistics and display data" article has been introduced, want to master the knowledge points of this article also need to do your own practice to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.