svg文件使用highmap显示
svg文件使用highmap显示
highmap,ammap都是比较好的第三方插件用来显示svg图片;
ammap导航可能更美观点(这个highmap后面可能也会赶上),
highmap在ie8上可以正常显示,这点是这次没有使用ammap的主要原因;
步骤:
1、拥有一个svg文件;
2、使用Inkscape打开,直接另存为svg就可以了(此步骤主要是将普通的svg文件转换为highmap需要的数据格式),此工具的详细使用方法;
3、在数据转换页面 将2中保存的svg文件进行转换;此时highmap所需的series数据格式已经生成;
$(function () {
Highcharts.setOptions({
lang:{
drillUpText:"< 返回"
}
});
// Initiate the chart
$('#container').highcharts('Map', {
chart : {
events: {
drilldown: function (e) {
}
}
},
title : {
text : '全省业绩概况图'
},
plotOptions:{
series:{
//allowPointSelect:true,
cursor:"pointer"
,color:"#00ff00"
,states:{hover:{
brightness:0.2
}}
,dataLabels:{format:"{point.name}",enabled:true}
,point:{
events:{
click:function(e){
//this.select(!this.selected);
}
}
}
}
},
legend:{
enabled: false,
},
credits:{
enabled: false,
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
drilldown:{
activeDataLabelStyle: {
color: 'white',
textDecoration: 'none'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
},
series:DRILLDOWN
},
series : SERIES
});
});