PHP+jQuery realizes the statistical display effect of China map hotspot data

An example of China map hotspot data statistical display implemented by PHP jQuery. When the mouse slides to the designated province area on the map, the data information of the corresponding province will be displayed in the pop-up prompt box.

First add a div #tip to the page to display the prompt box for map information and #map to generate the map.

<div id="map"></div>  
<div id="tip"></div>

Then we introduce the jQuery library, raphael.js and chinamapPath.js (China map data)

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="raphael.js"></script> 
<script type="text/javascript" src="chinamapPath.js"></script>

Draw the China map by calling raphael, and then load the statistical data. Due to the map block Xiao, we do not display the data on the map block when the map is loaded. We use mouse interaction to better display the data information to the user.

When the mouse slides to the province block, locate the mouse coordinates through e.clientX and e.clientY, then locate the prompt box div#tip through jquery's css() method, and change the name and name of the corresponding province The number of active users is added to the prompt box and displayed. The code is as follows:

$(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][&#39;path&#39;].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][&#39;name&#39;] + "</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][&#39;path&#39;], state); 
            i++; 
        } 
    }); 
}); 
 
function string2Array(string) { 
    eval("var result = " + decodeURI(string)); 
    return result; 
}

For more related PHP knowledge, please visit php tutorial!

The above is the detailed content of PHP+jQuery realizes the statistical display effect of China map hotspot data. For more information, please follow other related articles on the PHP Chinese website!