Raphael绘制中国地图实现点击哪儿在哪儿显示柱状图

最新推荐文章于 2023-12-27 16:23:02 发布

置顶

fei_tian123

最新推荐文章于 2023-12-27 16:23:02 发布

阅读量2.1k

点赞数

文章标签： Raphael绘制中国地图中国地图上面显示柱状图鼠标点那儿在哪儿显示柱状图中国地图

本文链接：https://blog.csdn.net/fei_tian123/article/details/48494715

版权

这篇博客介绍了如何使用Raphael.js库来绘制中国地图，并实现地图上的省份点击后在其下方显示对应的柱状图。通过遍历地图区域，设置点击事件，动态改变颜色和形状，实现了交互式地图的功能。

摘要由CSDN通过智能技术生成

1.首先导入各种js包：

2. 添加页面部分代码

3. 绘制地图部分代码：

    $(function() {

       Raphael.getColor.reset(); //色谱重置回红色
       //创建一个画布对象用来绘制。你必须第一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。
        var R = Raphael("china_map", 600, 500);
       //调用绘制地图方法
        paintMap(R);

       var current = null;

       //用于对鼠标点击次数的计数；
       var result = 0;
       //判断两次点击的区域名字的标志量；
       var nameFlag = "";
       var x=0;
       var y=0;

       var textAttr = {
            "fill": "#000",
            "font-size": "13px",
            "cursor": "pointer"   //光标的CSS类型,指针类型；
        };


        for (var state in china) {//state代表每个省，即就是用每个或区域来遍历整个地图区域；
           //