svg文件使用highmap显示

svg文件使用highmap显示
highmap，ammap都是比较好的第三方插件用来显示svg图片；
    ammap导航可能更美观点(这个highmap后面可能也会赶上)，
    highmap在ie8上可以正常显示，这点是这次没有使用ammap的主要原因；
步骤：
1、拥有一个svg文件；
2、使用Inkscape打开，直接另存为svg就可以了（此步骤主要是将普通的svg文件转换为highmap需要的数据格式），此工具的详细使用方法；
3、在数据转换页面 将2中保存的svg文件进行转换；此时highmap所需的series数据格式已经生成；
  1. $(function () {
  2.         Highcharts.setOptions({
  3.             lang:{
  4.                 drillUpText:"< 返回"    
  5.             }    
  6.         });
  7.         // Initiate the chart
  8.         $('#container').highcharts('Map', {
  9.             chart : {
  10.                 events: {
  11.                     drilldown: function (e) {
  12.                         
  13.                     }
  14.                }
  15.               },
  16.             title : {
  17.                 text : '全省业绩概况图'
  18.             },
  19.             plotOptions:{
  20.                 series:{
  21.                     //allowPointSelect:true,
  22.                     cursor:"pointer"
  23.                     ,color:"#00ff00"
  24.                     ,states:{hover:{
  25.                         
  26.                         brightness:0.2
  27.                     }}
  28.                     ,dataLabels:{format:"{point.name}",enabled:true}
  29.                     ,point:{
  30.                         events:{
  31.                             click:function(e){
  32.                                 //this.select(!this.selected);
  33.                             }
  34.                             
  35.                         }    
  36.                     }
  37.                 }
  38.             },
  39.                         legend:{
  40.                                 enabled: false,
  41.                         },
  42.                         credits:{
  43.                                 enabled: false,
  44.                         },
  45.             mapNavigation: {
  46.                 enabled: true,
  47.                 buttonOptions: {
  48.                     verticalAlign: 'top'
  49.                 }
  50.             },
  51.                         drilldown:{
  52.                             activeDataLabelStyle: {
  53.                     color: 'white',
  54.                     textDecoration: 'none'
  55.                 },
  56.                 drillUpButton: {
  57.                     relativeTo: 'spacingBox',
  58.                     position: {
  59.                         x: 0,
  60.                         y: 60
  61.                     }
  62.                 },
  63.                             series:DRILLDOWN
  64.                         },
  65.             series : SERIES
  66.         });
  67. });

    




【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/vvch/p/4867642.html