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
        });
});

    

来自为知笔记(Wiz)