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) {
13. }
14. }
15. },
16. title : {
17. text : '全省业绩概况图'
18. },
19. plotOptions:{
20. series:{
21. //allowPointSelect:true,
22. cursor:"pointer"
23. ,color:"#00ff00"
24. ,states:{hover:{
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. }
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. });

    

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/vvch/p/4867642.html