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. HDU——1133 Buy the Ticket

    Buy the Ticket Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  2. FTP用户-禁止登录系统

    OS是Ubuntu 11.10. 1.   which nologin #/usr/sbin/nologin 2.   vim /etc/shells   #在该文件后添加/usr/sbin/nolo ...

  3. STL 笔记(五) 算法 algorithm

    在 STL 中,算法是一系列的函数模版.STL 提供了大概 70 个算法,由头文件 <algorithm>.<numeric>.<functional>组成. 头文 ...

  4. window+nginx+php-cgi的php-cgi线程/子进程问题

    见bbs http://bbs.csdn.net/topics/390803643/close 正常的配置情况下,window的php-cgi是不会出现多线程/子进程的,例如以下配置 fastcgi_ ...

  5. HDFS01

    ==============NameNode============== 管理文件系统的命名空间 记录每个文件数据在各个DataNode上的位置和副本信息 协调客户端对文件的访问 NameNode文件 ...

  6. go语言笔记——调试还很弱,用gdb来做?可用panic和defer。格式化代码使用gofmt,貌似我的vim插件是自带

    3.3 调试器 应用程序的开发过程中调试是必不可少的一个环节,因此有一个好的调试器是非常重要的,可惜的是,Go 在这方面的发展还不是很完善.目前可用的调试器是 gdb,最新版均以内置在集成开发环境 L ...

  7. 【POJ 3784】 Running Median

    [题目链接] http://poj.org/problem?id=3784 [算法] 对顶堆算法 要求动态维护中位数,我们可以将1-M/2(向下取整)小的数放在大根堆中,M/2+1-M小的数放在小根堆 ...

  8. P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper 状压dp

    这个状压dp其实很明显,n < 18写在前面了当然是状压.状态其实也很好想,但是有点问题,就是如何判断空间是否够大. 再单开一个g数组,存剩余空间就行了. 题干: 题目描述 A little k ...

  9. bzoj3663

    几何+lis 很巧妙.直接做很困难,那么我们转化一下,把每个点能看见的圆弧画出来.只有这些圆弧相交时才满足条件. 那么也就是找出圆上尽量多两两相交的区间. 所以我们先按左端点极角排序,然后固定一个必须 ...

  10. 57.部门职位管理 ExtJs 展示

    1.jobInfo.jsp <%@ page language="java" pageEncoding="UTF-8"%> <script t ...