我正在使用PlotLines与Highcharts合作。我想在PlotLine的标签内添加一个链接来做某事(例如删除或更新)。
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Add Link in PlotLines'
},
xAxis: {
categories: ['Africa', 'America', 'Asia'],
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
id:'PlotLine1',
label:{text:'PlotLine 1 ' + '<a href="#" onClick="delete(PlotLine1);">Delete</a>'}
},
{
value:200,
color: '#000055',
width:2,
id:'PlotLine2',
zIndex:4,
label:{text:'PlotLine 2 ' + '<a href="#" onClick="delete(PlotLine2);">Delete</a>'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}]
});
});
});
如果您看到PlotLines生成的源代码,您可以看到如下内容:
<tspan onclick="location.href="#"" style="cursor: pointer;" dx="3">
Delete
</tspan>
我不知道是否有任何方法可以在标签中添加链接或按钮。 来源位于http://jsfiddle.net/nDjdc/21/
提前致谢,
答案 0 :(得分:3)
Highcharts在渲染时似乎没有onClick
属性,但它确实带有href
所以你可以这样做:
<a href="javascript: deleteMe('PlotLine1');">Delete</a>
我创造了一个工作小提琴。请看一下:http://jsfiddle.net/amyamy86/V82pQ/
唯一需要注意的是它只能访问全局对象,所以我希望你能恰当地命名你的应用程序:)
Fyi delete
不是变量的好名字,因为它是一个保留字。见https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words