我想在导出 amcharts.com 图表时给图表标题加下划线,但在正常查看图表时不需要。 Amcharts.com 支持建议在导出图表时将下划线作为内联样式添加到标题。
您可以在此处找到代码示例: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);
}
“导出”对象的“菜单”对象(也用于设置存在哪些菜单选项)中的各种格式(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 时会出现问题。具体来说,图表标题的下划线延伸到标题末尾之外,并且在标题的中点周围似乎有一个删除线(例如,通过“Chart”的字母“Cha”,如图所示上面的 Codepen 示例)。奇怪的是,当在 Adobe Illustrator CS6 中查看下载的 SVG 文件时会出现这种情况,但在 Inkscape 中不会出现(均在 Windows 10 桌面上)。它似乎与浏览器无关(在 Windows 10 桌面上使用 Firefox、Chrome、Opera 和 IE 的结果相同)。
Amcharts.com 支持无法重现该问题。任何建议或解决方法将不胜感激。
最佳答案
我可以在 Firefox 中看到它,但 Chrome 和 IE11 适合我 (Win 7)。
我认为这实际上可能是 Firefox 正在做正确的事情而其他渲染器可能不是的情况(请参阅此答案末尾的注释)。
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>
注意 <tspan>
前后有空格包含标题文本。
然而它是父<text>
样式为 text-decoration="underline"
的元素.
这很重要的原因是文件顶部发生的事情。根<svg>
元素声明:xml:space="preserve"
.通过这样做,它告诉渲染器所有空格都很重要并且应该保留。所以 <tspan>
前后的空格应该被渲染 - 包括它们的下划线。
您获得删除线效果的原因是因为 tspan 之前的空格带有下划线,然后 tspan 在显示标题的其余部分之前将文本位置向下和向左更改。
解决方法是:
- 删除
<tspan>
前后的空格, 或 - 更改
xml:space
属性为default
, 这将导致空格被抑制。
tl;dr
图表库的 SVG 导出器中存在错误。您可能应该报告它。
Chrome
xml:space
即将推出的 SVG2 规范中不推荐使用该属性。这可能是它不影响 Chrome 和/或其他一些浏览器的原因之一。尤其是 Chrome,已经开始实现一些 SVG2 特性。但是我不确定是否删除 xml:space
就是其中之一。
关于javascript - 导出为 SVG 时在 amcharts.com 图表标题中为工件下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39241701/