Javascript 高图+；xAxis标签格式化程序

我在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>';

而不是

data-plugin-options='{"type":"iframe"}'

不管我怎么做，我似乎都无法阻止这一切的发生

我尝试过的事情：

将简单转义与\'

创建一个var并将其传递到返回字符串中

已使用。替换（/['“]+/g'，）

有人能给我指一下正确的方向吗？这让我慢慢发疯，谢谢大家

反馈后更新

感谢您的回复，问题不在于数据插件选项属性内的实际单引号，而在于它周围的单引号，因此，例如，它呈现：数据插件选项=“{”类型“：“iframe”}”，而不是数据插件选项=“{”类型“：“iframe”}”，我发现即使我添加一个假的html元素，例如foo=bar，它也会将其呈现为foo=“bar”，因此它会在xAxis标签格式化程序中自动添加双引号

请查看my modified（），并检查xAxis上图标标签的元素，您会发现它使用引号呈现，即使原始代码中没有引号？您知道如何防止这种情况，因为如果没有引号，lightbox似乎无法工作

---

谢谢大家

您需要正确转义进入

数据插件选项

属性的字符串。更多信息：

格式化程序：函数（）{
函数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））；
返回“”
+   ''
+ '';
},

---

您还可以使用内置方法，而不是我们自制的

escapeAttr（）

，但无论谁以后读取该属性，都需要首先读取该值才能获得有效的JSON。

嗨，Spinxxx，我已经尝试了您的解决方案，并用我的发现更新了我的问题，谢谢您的帮助您无法更改该行为-这就是正确的HTML编写方式。如果lightbox不起作用，请将该库添加到JSFIDLE to inv中进一步估计。

data-plugin-options="{"type":"iframe"}"

data-plugin-options='{"type":"iframe"}'

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>';
},