HighCharts + xAxis标签格式化程序

时间:2017-12-13 15:41:37

标签: javascript jquery highcharts

我在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"}'

无论我尝试什么,我似乎无法防止这种情况发生。

我尝试过的事情:

  1. 使用 \'
  2. 进行简单转义
  3. 创建了一个var并将其传递给返回字符串
  4. 使用 .replace(/ ['“] + / g,'')
  5. 有人可以指出我正确的方向,因为它让我慢慢疯狂,谢谢所有

    反馈后更新

    感谢您的回复,问题不在于data-plugin-options属性中的实际单引号,而在于它周围,例如它呈现:data-plugin-options = {“type”:“iframe”} 而不是data-plugin-options = ' {”type“:”iframe“} ' ,我发现即使我要添加一个假的html元素,例如 foo = bar ,它也会将其呈现为 foo =“bar”,因此它会自动添加双引号,在xAxis标签格式化程序中。

    请参阅我修改后的JSFiddlehttp://jsfiddle.net/g6yehxeo/1/),并检查xAxis上图标标签的元素,您会发现它使用引号呈现,即使是原始代码中没有?任何想法如何防止这种情况,因为灯箱似乎没有这些。

    全部谢谢

1 个答案:

答案 0 :(得分:1)

您需要正确转义进入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>';
},

http://jsfiddle.net/g6yehxeo/

您也可以使用内置的escape()方法代替我们自制的escapeAttr(),但是之后读取该属性的人首先需要unescape()该值才能获得有效的JSON。< / p>