HighCharts + xAxis 标签格式化程序

Posted 2023-03-11

【中文标题】HighCharts + xAxis 标签格式化程序

【英文标题】：HighCharts + xAxis label formatter

【发布时间】：2017-12-13 15:41:37

【问题描述】：

我在 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 标签的元素，您会发现它带有引号，即使其中没​​有引号原始代码？关于如何防止这种情况的任何想法，因为没有这些，灯箱似乎无法工作。

谢谢大家

【参考方案1】：

您需要正确转义进入data-plugin-options 属性的字符串。更多信息：https://***.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>';
,

http://jsfiddle.net/g6yehxeo/

你也可以使用内置的escape()方法代替我们自制的escapeAttr()，但是以后读取属性的人需要先unescape()的值才能得到有效的JSON。

【讨论】：

嗨 Spinxxx，我已经尝试了您的解决方案并根据我的发现更新了我的问题，谢谢您的帮助

你无法改变这种行为——这就是编写正确的 HTML 的方式。如果灯箱不起作用，请将该库添加到 JSFiddle 以进一步调查。