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. title : {
  16. text : '全省业绩概况图'
  17. },
  18. plotOptions:{
  19. series:{
  20. //allowPointSelect:true,
  21. cursor:"pointer"
  22. ,color:"#00ff00"
  23. ,states:{hover:{
  24. brightness:0.2
  25. }}
  26. ,dataLabels:{format:"{point.name}",enabled:true}
  27. ,point:{
  28. events:{
  29. click:function(e){
  30. //this.select(!this.selected);
  31. }
  32. }
  33. }
  34. }
  35. },
  36. legend:{
  37. enabled: false,
  38. },
  39. credits:{
  40. enabled: false,
  41. },
  42. mapNavigation: {
  43. enabled: true,
  44. buttonOptions: {
  45. verticalAlign: 'top'
  46. }
  47. },
  48. drilldown:{
  49. activeDataLabelStyle: {
  50. color: 'white',
  51. textDecoration: 'none'
  52. },
  53. drillUpButton: {
  54. relativeTo: 'spacingBox',
  55. position: {
  56. x: 0,
  57. y: 60
  58. }
  59. },
  60. series:DRILLDOWN
  61. },
  62. series : SERIES
  63. });
  64. });

    

svg文件使用highmap显示的更多相关文章

  1. SVG文件:从Illustrator导文件到Web

    可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式.它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐.如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从I ...

  2. 简单生成svg文件

    this.fileSaveSync = function (file, data) { var fs = require('fs-extra'); fs.writeFileSync(file, dat ...

  3. NK3C:关于svg文件使用

    我们从 http://iconfont.cn/ 上下载的SVG文件由以下构成,系统中使用的时候请做适当的修改: 1.width.Height:设置为100%: 2.defs模块去掉:(如果不去掉,IE ...

  4. 文件_ _android从资源文件中读取文件流并显示的方法

    ======== 1   android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...

  5. WPF下载远程文件,并显示进度条和百分比

    WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...

  6. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  7. java使用batik转换svg文件

    svg是一种矢量图片格式,用来保存高保真的图片.我们可以用编辑器打开svg,我们可以看到svg文件其实就是一个xml文件,这种文件浏览器也可以识别.因此要查看svg用现成的浏览器就可以了.值得庆幸的是 ...

  8. 分享:Svg文件转换为图片(调用 Inkscape 命令行)

    其实只是做了简单封装,可以方便进行批量转换. 获取Svg对象坐标的代码请看:根据svg节点对象类型和路径值转换坐标值, DrawingColor方法是进行颜色填充的. /// <summary& ...

  9. 利用COM组件IPicture读取jpg、gif、bmp图片文件数据和显示图片

    1.读取图片数据 函数原型:bool LoadImage(const char *pName, unsigned char *pBitData); 函数功能,读取pName指向的图片文件的位图数据 b ...

随机推荐

  1. android调试

    要进行调试,首先构建app的时候必须选择是Debug模式,而不能是Release模式. 接下来的内容转载自: http://www.cnblogs.com/gaoteng/p/5711314.html ...

  2. 遇到很多次,要注意区分service调用,本地用户调用这些区别

    WTSQueryUserToken返回1314   The WTSQueryUserToken function obtains the primary access token of the log ...

  3. java int怎么转换为string

    1.两种方法,一个是再int后面+“”,就可以转为字符串. 另一个, nt i=12345;String s="";第一种方法:s=i+"";第二种方法:s=S ...

  4. raywenderlich.com的Swift编程风格指南

    翻译自:https://github.com/raywenderlich/swift-style-guide 这个风格指南可能和你从其它地方看到的不同,我们的焦点主要集中在互联网和文章上的可读性.创建 ...

  5. [LeetCode][Java] 4Sum

    题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  6. 【C语言】模拟实现memmove函数(考虑内存重叠)

    //模拟实现memmove函数(考虑内存重叠) #include <stdio.h> #include <assert.h> #include <string.h> ...

  7. Redis 持久化,写入磁盘的方式

    如果帮到了您,可以支持一下,谢谢您的支持! Redis是一个支持持久化的内存数据库=>也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化. redis支持四种持久化方式, 一是 Sn ...

  8. react State改变,页面却没有改变

    react 小白编程 做项目时遇到了个问题,无论我怎么查看我的action.reducer 还是 dispatch 函数,都没有发现有什么毛病.但是 debugger 的时候,state 改变了,页面 ...

  9. js阻碍DOM加载

    今天用谷歌做了个小测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  10. 【已解决】Makefile执行过程中出错:make: *** No rule to make target ` ‘, needed by xxx. Stop(转载)

    转自: http://www.crifan.com/makefile_error_make_no_rule_to_make_target_needed_by_stop/ [问题] 有个已有的Makef ...