2013-03-08 82 views
0

我正在使用PlotLines使用Highcharts。我想在PlotLine的标签内添加一个链接来执行某些操作(例如删除或更新)。Highcharts如何添加一个链接到PlotLines?

$(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] 
       }] 
      }); 
     }); 


}); 

如果你看到的故事情节产生的源代码,你可以看到这样的事情:

<tspan onclick="location.href="#"" style="cursor: pointer;" dx="3"> 
     Delete 
</tspan> 

我不知道是否有任何的方式来添加一个链接或按钮进入标签。 来源是http://jsfiddle.net/nDjdc/21/

由于提前,

回答

3

Highcharts似乎没有携带onClick属性时,它呈现,但它携带href所以你可以这样做:

<a href="javascript: deleteMe('PlotLine1');">Delete</a> 

我创建了一个你的工作小提琴。请看看:http://jsfiddle.net/amyamy86/V82pQ/

唯一需要注意的是,它只能访问全局对象,所以我希望你正确命名空间的应用程序:)

据透露delete不是变量一个好名字,因为它是一个保留字。见https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words