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

    




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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果 SVG 文件引入后不显示,可能是以下原因造成的: 1. 文件路径错误:请检查文件路径是否正确,是否能正常访问到该文件。 2. 文件内容错误:请检查文件内容是否正确,是否有语法错误或不规范的代码。 3. 浏览器不支持:有些浏览器不支持 SVGs,请检查使用的浏览器是否支持该格式。 4. 文件与页面编码不一致:如果文件编码与页面编码不一致,可能导致显示不正确。请检查文件编码与页面编码是否一致。 请根据以上情况进行检查,如果还是不能解决问题,请提供更详细的信息以便我们进一步帮助您。 ### 回答2: 在使用SVG文件时,如果出现不显示的情况,可能存在以下几个原因: 1. 文件路径错误:首先需要确认文件路径是否正确,是否正确引用了SVG文件。可以通过在浏览器的开发者工具中查看网络请求的响应来确定文件是否成功加载。 2. SVG代码错误:如果SVG文件中的代码有语法错误或格式不正确,也会导致无法显示。可以使用代码编辑器或在线SVG验证工具来检查SVG代码的正确性。 3. CSS样式冲突:有时候SVG的样式与页面中的CSS样式冲突,可能会导致SVG显示。可以尝试通过修改CSS样式或使用特定的SVG容器来解决该问题。 4. 兼容性问题:某些浏览器或设备对SVG的支持可能存在差异,从而导致不显示的问题。可以尝试在不同的浏览器或设备上查看SVG文件是否能够正常显示。 5. SVG文件内容为空:最后需要确认SVG文件内容是否为空,即SVG文件是否包含绘制图形的代码。如果SVG文件内容为空,将无法显示任何图形。 综上所述,当SVG文件引入不显示时,需要检查文件路径、SVG代码、CSS样式、兼容性和文件内容等方面的问题,以确定具体原因并采取相应的解决方法。 ### 回答3: 当SVG文件引入但不显示时,可能有以下几个原因: 1. 文件路径错误:检查引入的SVG文件路径是否正确,确保文件存在于该位置,并且路径中没有任何拼写错误或者错误的斜杠方向。 2. 文件内容错误:检查SVG文件的内容是否正确。可以尝试手动打开SVG文件,确保文件没有损坏或者格式错误。确保SVG标签和属性正确使用,没有错误的闭合标签或者错误的语法。 3. SVG元素大小错误:检查SVG元素的宽度和高度是否正确设置。如果宽度和高度设置为0或者非常小的值,SVG将无法显示。 4. CSS样式冲突:如果在SVG文件或者父元素的样式中对SVG元素进行了特定的样式设置,可能会导致SVG显示。可以尝试修改或者删除这些样式来确认是否是样式冲突导致的问题。 5. 浏览器兼容性:不同的浏览器对SVG的支持可能存在差异。确保你使用的浏览器支持SVG格式,并更新到最新的版本。可以尝试在不同的浏览器中打开该SVG文件,检查是否显示正常。 如果以上方法都无法解决问题,可以尝试使用其他的SVG文件进行引入,查看是否只有该文件无法显示,还是整个SVG引入的功能出现了问题。另外,也可以尝试在简单的HTML文件中引入SVG文件,排除其他因素的干扰。如果问题仍然存在,可能需要进一步检查代码或者查找其他相关资料来解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值