我在 highcharts JS 中遇到了 xAxis.labels.formatter 函数这个奇怪而奇妙的问题。
我想在图表的 xAxis 标签上添加一个灯箱图标,如下所示:
return '<div class="label">'
+'<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options=\'{"type":"iframe"}\'>ICON</a>'
+'</div>';
然而,在呈现此图表时,html 代码显示以下输出:
<div class="label">
<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="{"type":"iframe"}">ICON</a>
</div>
问题是单引号被渲染成双引号
data-plugin-options="{"type":"iframe"}"
代替
data-plugin-options='{"type":"iframe"}'
无论我尝试什么,我似乎都无法阻止这种情况的发生。
我尝试过的事情:
- 使用 \' 进行简单转义
- 创建一个 var 并将其传递给返回字符串
- 使用 .replace(/['"]+/g, '')
谁能给我指出正确的方向,因为它让我慢慢发疯,谢谢大家
反馈后更新
感谢您的回复,问题不在于 data-plugin-options 属性中的实际单引号,而是它周围的单引号,因此例如它呈现:data-plugin-options=" {"type":"iframe"}" 而不是 data-plugin-options='{"type":"iframe"}' ,我发现即使我添加一个伪造的 html 元素,例如 foo=bar,它也会将其呈现为 foo="bar",因此它会自动添加双引号,在 xAxis 标签格式化程序中。
请看我修改的JSFiddle ( http://jsfiddle.net/g6yehxeo/1/ ),并检查 xAxis 上 icon 标签的元素,你会发现它用引号呈现,即使原始代码中没有引号?关于如何防止这种情况的任何想法,因为没有这些灯箱似乎无法工作。
谢谢大家
最佳答案
您需要正确转义进入 data-plugin-options
属性的字符串。更多信息:https://stackoverflow.com/a/9189067/1869660
formatter: function () {
function escapeAttr(str) {
var div = document.createElement('div');
div.setAttribute('data-dummy', str);
return /\"(.*)\"/.exec(div.outerHTML)[1];
}
var options = { type: 'iframe'},
optionsAttr = escapeAttr(JSON.stringify(options));
return '<div class="label">'
+ '<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="' + optionsAttr + '">ICON</a>'
+ '</div>';
},
您还可以使用内置的 escape()
方法而不是我们自制的 escapeAttr()
,但是以后读取该属性的人需要 unescape()
首先获取有效 JSON 的值。
关于javascript - HighCharts + xAxis 标签格式化程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47796990/