网站访问量可视化

来源：互联网发布：ppt mac破解版下载编辑：程序博客网时间：2024/05/17 17:17

最近有一个项目需要将网站访问量动态的在中国地图中显示出来，点击每个省份后会单独进入这个省的地图，显示省的详细数据，

之前试了下kartograph，但是生成地图实在难看，所以换了现在用的jquary，里边已经有做好的中国省份地图数据，js格式的，但是遗憾的是好像没有省份详细得地图数据，

所以这块只能稍后自己做了，话不多说，先看下效果图：

大概流程：

首先生成一个json格式的文件，里面存放了相关数据，然后javascript会调用这些数据动态在地图中显示。

json文件：（pv可以写脚本动态传值，url为这个省的链接，现在每个省的地图还没有弄，所以就先空着了）

{
"1" : { "id": "HKG", "name": "香港", "pv": "4003", "url": "" },
"2" : { "id": "HAI", "name": "海南", "pv": "2002", "url": "" },
"3" : { "id": "YUN", "name": "云南", "pv": "1232", "url": "" },
"4" : { "id": "BEJ", "name": "北京", "pv": "5000", "url": "" },
"5" : { "id": "TAJ", "name": "天津", "pv": "5703", "url": "" },
"6" : { "id": "XIN", "name": "新疆", "pv": "1000", "url": "" },
"7" : { "id": "TIB", "name": "西藏", "pv": "3300", "url": "" },
"8" : { "id": "QIH", "name": "青海", "pv": "6000", "url": "" },
"9" : { "id": "GAN", "name": "甘肃", "pv": "3457", "url": "" },
"10" : { "id": "NMG", "name": "内蒙古", "pv": "", "url": "" },
"11" : { "id": "NXA", "name": "宁夏", "pv": "3452", "url": "" },
"12" : { "id": "SHX", "name": "山西", "pv": "2346", "url": "" },
"13" : { "id": "LIA", "name": "辽宁", "pv": "3451", "url": "" },
"14" : { "id": "JIL", "name": "吉林", "pv": "6000", "url": "" },
"15" : { "id": "HLJ", "name": "黑龙江", "pv": "3462", "url": "" },
"16" : { "id": "HEB", "name": "河北", "pv": "1235", "url": "" },
"17" : { "id": "SHD", "name": "山东", "pv": "3451", "url": "" },
"18" : { "id": "HEN", "name": "河南", "pv": "2346", "url": "" },
"19" : { "id": "SHA", "name": "陕西", "pv": "2341", "url": "" },
"20" : { "id": "SCH", "name": "四川", "pv": "1235", "url": "" },
"21" : { "id": "CHQ", "name": "重庆", "pv": "1235", "url": "" },
"22" : { "id": "HUB", "name": "湖北", "pv": "3000", "url": "" },
"23" : { "id": "ANH", "name": "安徽", "pv": "5342", "url": "" },
"24" : { "id": "JSU", "name": "江苏", "pv": "2345", "url": "" },
"25" : { "id": "SHH", "name": "上海", "pv": "3452", "url": "" },
"26" : { "id": "ZHJ", "name": "浙江", "pv": "", "url": "" },
"27" : { "id": "FUJ", "name": "福建", "pv": "2346", "url": "" },
"28" : { "id": "TAI", "name": "台湾", "pv": "2356", "url": "" },
"29" : { "id": "JXI", "name": "江西", "pv": "5346", "url": "" },
"30" : { "id": "HUN", "name": "湖南", "pv": "2346", "url": "" },
"31" : { "id": "GUI", "name": "贵州", "pv": "1236", "url": "" },
"32" : { "id": "GXI", "name": "广西", "pv": "6456", "url": "" },
"33" : { "id": "GUD", "name": "广东", "pv": "3246", "url": "" }
}

地图显示代码：（网上的代码，拿过来修改了一下，嘿嘿）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>基于jquery的中国地图</title>    <link href="js/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" />    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>    <script src="js/jquery.vector-map.js" type="text/javascript"></script>    <script src="js/china-zh.js" type="text/javascript"></script>   <script type="text/javascript">        $(function() {        $.getJSON("city.json",function(city){            $('#map').vectorMap({        map: 'china_zh',        color: "#B4B4B4",        hoverColor: false,        //显示各地区名称和活动        backgroundColor: '#383f47',        onLabelShow: function (pv, label, code) {        $.each(city, function (k, v) {        if (code == v.id) {            label.html(                '<b>城市：</b>'+v.name+'</b><br/>'+                '<b>并发量：</b>'+v.pv+'</br>'                 );            }        });    },    //鼠标移入省份区域，改变鼠标状态    onRegionOver: function(pv, code){        $.each(city, function (i, v) {            if ((code == v.id) && (v.pv != '')) {            $('#map').css({cursor:'pointer'});                }        });    },    //鼠标移出省份区域，改回鼠标状态    onRegionOut: function(pv, code){        $.each(city, function (i, v) {            if ((code == v.id) && (v.pv != '')) {            $('#map').css({cursor:'auto'});                }        });    },    //点击有活动的省份区域，打开对应活动列表页面    onRegionClick: function(pv, code){        $.each(city, function (i, v) {            if ((code == v.id) && (v.pv != '')) {              window.location.href = v.url;                }            });        }    });    //改变有活动省份区域的颜色    $.each(city, function (i, v) {            if ((v.pv < '3000') && (v.pv != '')) {        var josnStr = "{" + v.id + ":'#80ff00'}";        $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));            }        else if ((v.pv < '4000') && (v.pv != '')) {        var josnStr = "{" + v.id + ":'#ffff00'}";        $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));            }        else if (((v.pv >= '4000') && (v.pv != ''))) {        var josnStr = "{" + v.id + ":'#ff4000'}";        $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));            }        });        });        })</script></head><body>    <div id="map" style="margin-left: 30px; padding-top: 10px; padding-left: 10px;        background: white; width: 650px; height: 530px;">    </div></body></html>

0 0