网站访问量可视化

最新推荐文章于 2021-05-28 21:22:44 发布

terry_csdn

最新推荐文章于 2021-05-28 21:22:44 发布

阅读量1.5k

点赞数

分类专栏： python 文章标签： json python javascript 可视化 jquery

本文链接：https://blog.csdn.net/u012717165/article/details/17752745

版权

python 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

之前试了下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>