2

我是 SVG 的新手，所以这可能不是很奇怪，但是任何人都可以在这里帮助我解决 Highcharts 和 SVG 的问题。

我使用了一个在网上找到的 jsfiddle，并尝试对其进行自定义以适应我的使用。这是：http: //jsfiddle.net/qs7FY/

我面临的问题是在结果面板中看到的圆角线块。

有人可以帮我解决这个问题吗？

提前致谢！

在下面的屏幕截图中查看问题

在这里查看问题在此处输入图像描述

4

2 回答 2

2

将此添加到代码的末尾

   $('svg path ').each(function(index,value) {
    var myd = $(this).attr('d') ; 
    var indexofc = myd.indexOf('C') ; 
    var indexofL = myd.indexOf('L') - 1 ; 
    if(indexofc != -1){
     var final = myd.slice(indexofc ,indexofL) ;
    }
    var end = myd.replace(final ,'') ; 
    $(this).attr('d',end) ;

   });

修复jsFiddle后的图表

更新

使您的线条弯曲的原因是添加C = curveto到您的线条中，因此如果我删除它们，它们将是直的，正如您在更新 jsfiddle 后所看到的那样 - > http://jsfiddle.net/minagabriel/qs7FY/9/

这就是你的一条路的样子C 

  <path fill="none" d="M 102.29523731301347 84.2399490981872 
   C 107.29523731301347 
   84.2399490981872 113.95649598906613 88.67025753561153 123.11572666863853 
    94.76193163706998 L 132.27495734821093 100.85360573852843"
   stroke-width="1" 
   stroke="#004c67" visibility="visible" zIndex="3" transform="translate(10,40)">
       </path>

所以我循环遍历你的d元素，取出所有之间的东西C，L并最终得到如下内容：

       <path fill="none" d="M 102.29523731301347 84.2399490981872 
   L 132.27495734821093 100.85360573852843"
   stroke-width="1" 
   stroke="#004c67" visibility="visible" zIndex="3" transform="translate(10,40)">
       </path>

这应该采取曲线...请考虑查看 jsFiddle

于 2012-07-19T18:04:22.823 回答
1

这已在 svg-developers 邮件列表中进行了讨论，一些解决方案请参见此处。

圆顶线只是一个图案瓷砖问题。您可能会通过自己绘制图案拼贴然后尝试平铺它（切掉溢出图案拼贴的所有内容）来意识到自己做错了什么。对于插图，您可以尝试搜索“无缝瓷砖”。

于 2012-07-20T08:57:14.967 回答