Raphael绘制中国地图实现点击哪儿在哪儿显示柱状图
1.首先导入各种js包：
<script type="text/javascript" src="../js/chinamapPath.js"></script>
<script type="text/javascript" src="../js/raphael.js"></script>
<script type="text/javascript" src="../js/g.raphael-min.js"></script>
<script type="text/javascript" src="../js/g.pie-min.js"></script>
<script type="text/javascript" src="../js/g.bar-min.js"></script>
2. 添加页面部分代码
<div id="china_map" style="margin-left:200px; margin-top:40px"></div>
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代表每个省，即就是用每个或区域来遍历整个地图区域；
//Raphael.getColor(0.9):每次调用返回色谱中的下一个颜色(返回颜色的十六进制表示)
china[state]['path'].color = Raphael.getColor(0.9);//分省区域着色
china[state]['path'].transform("t30,0");//地图的每个省的路径横向平移坐标（30px,0px）
(function (st, state) {
//获取每个区域的中心坐标（getBBox()：返回指定元素的边界框，x：左上角X; y表示左上角y）
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//***修改部分地图文字偏移坐标
switch (china[state]['name']) {
case "江苏":
xx += 5;
yy -= 10;
break;
case "河北":
xx -= 10;
yy += 20;
break;
case "天津":
xx += 10;
yy += 10;
break;
case "上海":
xx += 10;
break;
case "广东":
yy -= 10;
break;
case "澳门":
yy += 10;
break;
case "香港":
xx += 20;
yy += 5;
break;
case "甘肃":
xx -= 40;
yy -= 30;
break;
case "陕西":
xx += 5;
yy += 10;
break;
case "内蒙古":
xx -= 15;
yy += 65;
break;
default:
}
//***写入地名,并加点击事件,部分区域太小，增加对文字的点击事件
//R.text(xx, yy, china[state]['name'])给地图区域的中心位置添加省的名字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(function () {
if(result<1){ //第一次点击这个区域
nameFlag = china[state]['name'];
clickMap();
controlChinaMap();
result += 1;
}else if(result>=1 && (nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap();
}else{
clickMap();
controlChinaMap();
china[state]['text'] = R.text(xx, yy, nameFlag).attr(textAttr).click(function (){
clickMap();
});
}
});
//图形的点击事件(st[0]表示一个SVGPathElement对象)
$(st[0]).click(function (e) {
if(result<1){ //第一次点击这个区域
x = xx;
y = yy;
nameFlag = china[state]['name'];
clickMap();
controlChinaMap();
result += 1;
}else if(result>=1 && (nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap();
}else{
clickMap();
R.barchart(x,y-150,50,200,[0],{type:"round"});
controlChinaMap();
}
});
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500);//为地图区域创建动画，鼠标滑过区域颜色加深，持续时间500毫秒
china[state]['text'].toFront();//元素上移
R.safari();//处理渲染错误
};
st[0].onmouseout = function () {
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
function clickMap() {
if (current == state) //判断两次点击是否点击的是同一个区域
return;
//重置上次点击的图形
current && china[current]['path'].animate({ transform: "t30,0", fill: china[current]['isClick'] ? china[current]['path'].color : "#b0d0ec", stroke: "#ddd" }, 2000, "elastic");
current = state; //将当前值赋给变量
//对本次点击
china[state]['path'].animate({ transform: "t30,0 s1.03 1.03", fill: china[state]['path'].color, stroke: "#000" }, 1200, "elastic");
st.toFront(); //向上
R.safari();
china[current]['text'].toFront(); //***向上
if (china[current] === undefined) return;
}
function controlChinaMap(){
//type默认是square，还有sharp、soft
R.barchart(xx,yy-150,50,200,[5,4,3,2,1],{type:"round"});
//在你的图上面加一个注释
//R.blob(xx,yy-130, "25%", 50);
}
})(china[state]['path'], state);
}
});
4. 绘制好的图片如下图片所示
