首页 文章

Amcharts.com中的下划线工件导出为SVG时的图表 Headers

提问于
浏览 次
3

我想在导出amcharts.com图表时强调图表 Headers ，但在正常查看图表时不要 . Amcharts.com支持建议在导出图表时将内联样式的下划线添加到 Headers 中 .

您可以在此处找到代码示例：https://codepen.io/bryanf/pen/jrNkwo . 我修改了amcharts.com基本导出示例（此处：https://www.amcharts.com/demos/exporting-chart-to-image/）以包含amcharts.com支持建议的"onPrint"函数：

function onPrint (e, info) {
  var format = info.format,
      mimeType = info.mimeType,
      fileName = [info.fileName, info.extension].join("."),
      chart = this.setup.chart,
      chartExport = chart.AmExport,
      $div = $(chart.div);

  setTimeout(function () {
    $div.find(".amcharts-title").attr("text-decoration", "underline");

    chartExport.capture(info, function () {
      chartExport[["to", format].join("")](info, function (data) {     
        chartExport.download( data, mimeType, fileName );        
      });
    });
  }, 200);
}

对于“export”对象的“menu”对象（也用于设置存在哪些菜单选项）中的各种格式（PNG，JPG和SVG），将触发onPrint功能：

"export": {
  "enabled": true,
  "menu": [{
    "class": "export-main",
    "menu": [ {
      "label": "Save Image",
      "menu": [ {
        "format": "PNG",          
        "click": onPrint
      }, {
        "format": "JPG",          
        "click": onPrint
      }, {
        "format": "SVG",
        "click": onPrint        
      }]      
    }]
  }]
}

这适用于PNG和JPG格式，但在导出为SVG时会导致问题 . 具体来说，图表 Headers 的下划线延伸到超出 Headers 末尾的方式，并且在 Headers 的中点附近似乎有一个删除线（例如，通过“图表”的字母“Cha”，如上面的Codepen例子） . 特别是，在Adobe Illustrator CS6中查看下载的SVG文件但在Inkscape中（在Windows 10桌面上都没有）时会出现这种情况 . 它似乎与浏览器无关（在Windows 10桌面上使用Firefox，Chrome，Opera和IE的结果相同） .

Amcharts.com支持无法复制该问题 . 任何建议或解决方法将不胜感激 .

javascript css svg amcharts

1 回答

  • 2

    我可以在Firefox中看到它，但Chrome和IE11对我来说很好（Win 7） .

    我认为这可能实际上是Firefox正在做正确的事情而其他渲染器可能不是（请参阅本答案末尾的注释） .

    显示 Headers 的SVG部分如下所示：

    <g transform=" matrix(1 0 0 1 823 20) ">
    <text font-family="Verdana" font-size="22" font-weight="bold" text-decoration="underline" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;fill:#000000;fill-opacity:1; fill-rule: nonzero; opacity: 1" >
        <tspan x="-63.72" y="10.48" fill="rgba(0,0,0,1)">Test Chart</tspan>
    </text>
</g>

    请注意，包含 Headers 文本的 <tspan> 之前和之后都有空格 .

    但是，父 <text> 元素的样式为 text-decoration="underline" .

    这很重要的原因是因为文件顶部发生了什么 . 根 <svg> 元素声明： xml:space="preserve" . 通过这样做，它告诉渲染器所有空白都是重要的，应该保留 . 因此 <tspan> 之前和之后的空间应该被渲染 - 包括它们的下划线 .

    获得删除线效果的原因是因为tspan之前的空格加下划线，然后tspan会在显示 Headers 的其余部分之前向下和向左更改文本位置 .

    解决方法是：

    • 删除 <tspan> 之前和之后的空格，或

    • 将 xml:space 属性更改为 default ，这将导致空格被抑制 .

    tl;dr

    图表库的SVG导出器中存在一个错误 . 你应该报告它 .

    Chrome

    xml:space 属性在即将发布的SVG2规范中已弃用 . 这可能是它不影响Chrome和/或其他一些浏览器的一个原因 . 特别是Chrome已经开始实现一些SVG2功能 . 但是我不确定删除 xml:space 是否是其中之一 .

    回复于

相关问题