PHP+jQuery réalise l'effet d'affichage statistique des données des points chauds de la carte chinoise

Un exemple d'affichage statistique des données des points chauds de la carte de Chine implémenté par PHP+jQuery Lorsque la souris glisse vers la zone de province désignée sur la carte, les informations sur les données de la province correspondante seront affichées. dans la boîte de dialogue contextuelle.

Ajoutez d'abord un div #tip à la page pour afficher la boîte de dialogue pour les informations sur la carte et #map pour générer la carte.

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

Ensuite, nous avons introduit la bibliothèque jQuery, raphael.js et chinamapPath.js (données cartographiques de la Chine)

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

Dessinez la carte de la Chine en appelant raphael, puis chargez les données statistiques Due. au bloc de carte Xiao, nous n'affichons pas les données sur le bloc de carte lorsque la carte est chargée. Nous utilisons l'interaction de la souris pour mieux afficher les informations sur les données à l'utilisateur.

Lorsque la souris glisse sur le bloc de province, localisez les coordonnées de la souris via e.clientX et e.clientY, puis localisez la boîte d'invite div#tip via la méthode css() de jquery et modifiez le nom et le nom de la province correspondante Le nombre d'utilisateurs actifs est ajouté à la boîte d'invite et affiché. Le code est le suivant :

$(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; 
}

Pour plus de connaissances PHP connexes, veuillez visiter le tutoriel php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!