- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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"}'
无论我尝试什么,我似乎都无法阻止这种情况的发生。
我尝试过的事情:
谁能给我指出正确的方向,因为它让我慢慢发疯,谢谢大家
反馈后更新
感谢您的回复,问题不在于 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/
使用 xAxis Categories 时如何在运行时更新 highcharts xAxis 范围? 在下面的 JsFiddle 中,期望的结果是当用户单击“所有月份”时,他们将看到完整的系列数据,而
我想绘制按 x 轴数据降序排序的时间序列。我已经按降序给出了我的数据,但 highcharts 仍然按升序绘制它检查 fiddle http://jsfiddle.net/r4rex6oz/ High
我想在同一 xAxis 中以小时为粒度显示来自不同日期间隔的数据。我想将两个图表显示在彼此之上,而不是彼此靠近。 我可以用 2 个 xAxis 来完成。参见示例:http://fiddle.jshel
这是带有样条系列的 Highcharts 图表。 xAxis max 设置为 9405,如以下 fiddle 所示:http://jsfiddle.net/Bridgeland/253gq/1/ 当我
我正在尝试使用 nvd3s 图表制作一个可切换轴,特别是 line chart example 。运行此示例后,打开控制台并输入 chart.setXAxis(false),x 轴不会隐藏。是否有一些
你好,我想知道这种图形是否可以使用 MP Android Chart: 我真正需要的是用其他几个 UI 组件(在本例中是 4 个 TextView 和一个 ImageView)自定义整个 XAxis。
如何从 0 开始 xAxis 和 yAxis 值并在图表库中设置自定义 xAxis 值? 因为库将手动取值。 最佳答案 You can set custom values for xAxis by u
关于 Highcharts,我有一个简短的问题要问你。 如何在运行时重置 xAxis[0] 和 xAxis[1] 宽度,以及如何在运行时重置 xAxis[1] 偏移量?我问的原因是因为我有一个包含两个
我正在寻找一种在 xAxis 标签上注册点击事件的方法。用户应该能够点击 xAxis 标签(而不是系列),我们应该能够调用一个函数。 无论是直接方式还是间接方式都应该没问题。 最佳答案 您几乎可以收听
我正在绘制带有每月数据点的折线图。但是,我希望比例尺仅显示年份字符串。 到目前为止,很容易。但是,据我所知,Highcharts 将始终绘制相对于刻度的 xAxis 标签……我需要在刻度之间居中显示它
好的,我有一个显示一些信息的 flot 堆叠条形图,现在除了 x 轴外,这一切都完美无缺。 目前,它没有显示我希望它显示的数据,而是在每隔一列显示一个列号。 下面是我的 xaxis 代码: var
我有一个 highcharts 图,其中 X 轴单位是日期。我的数据四舍五入到最近的一天,所以没有必要放大超过一天的水平。 但是,highcharts 让我可以放大到小时级别。我不想让用户放大比天更深
我有一个条形图显示,我可以完全控制颜色、对齐方式、数据标签格式等,但是当图表呈现时,x Axis 下方有一个标签以蓝色显示“Y 值”。 生成的标记是这样的... Y-values
我正在绘制一个 Highcharts - options.series.push({ name: this.SubCity, data: this.Data }); 其中 data 是系列数据的数组。
如果我有一个 unix 时间戳作为我的 x 轴,我如何格式化 x 轴刻度以便它们是人类可读的。示例: var x = [ 1599149438, 1599152204, 1599159972,
我使用 vue-apexcharts 在仪表板中绘制图表。我创建了一个通用文件,其中包含所有图表的基本选项(以统一样式和代码可重用性),并使用 mergeDeep() function 扩展/覆盖此对
我使用 mpandroidchart,我设置了 xAxis定位为双方,并设置标签,代码: xAxis.setPosition(XAxisPosition.BOTH_SIDED); xAxis.setD
似乎无法使用 grid.xaxis(at=, lab=) 旋转 xaxis 的标签通过例如90 度使用 gpar -选项。 除了创建单独的视口(viewport)和使用 grid.text() 之外,
我有一个非常基本的“线”周日期图形。我只需要 x 轴上的日期在我第一个点的同一天开始,但实际上它是在相应周的星期一开始的。我在文档上找到了一个 startOfWeek 选项,但只取两个值:0 = Su
当轴类型为“时间”时,无法将垂直标记添加到 xAxis。我想添加代表时间轴上不同日期事件的标记。 我试过的样本, https://jsfiddle.net/msbasanth/ez3cgm5d/3/
我是一名优秀的程序员,十分优秀!