2013-04-03 109 views
2

使用Highchart.jshighcharts add plotline label with images

是否可以將圖像添加到情節標籤?東西如下圖所示

enter image description here

我想用一個工具提示一起加入這個(我)的圖像,但似乎(從here),其可用於該元素的組有限的HTML不支持圖像,申報單或標題。

我已經想到,將圖像和工具提示添加到獨立的div(從圖表)中,找到標籤的位置並使用絕對定位添加此圖層會更容易。但是我不能給這個元素添加任何id或者什麼,所以我找不到它的位置。

有人有類似的問題?

我的解決方案:

CSS

.infoMedia { 
    position: absolute; 
    z-index : 10000; 
    width: 30px; 
    height: 30px; 
    background: url('../img/information.png') center no-repeat; 
} 

HTML

<div class='infoMedia' style='left:0px;top:0px;'></div> 

的JavaScript

function processHintPosition() // every resize, call this function 
{ 
    $('.infoMediaENEM').css('top', 0); 
     $('.infoMedia').css('left', 0); 

     var this_container = $('#container_line_graph'); 

     var this_container_width = $(this_container).width(); 
     var this_container_height = $(this_container).height(); 

     var this_margin_y = 60; 
     var this_margin_x = 15; 


     $('.infoMedia').css('top', $(this_container).offset().top + $(this_container).height() - this_margin_y); 

     // POSITION X 
     var x_val = $(this_container).offset().left + this_container_width - this_margin_x; 
     $('.infoMedia').css('left', x_val) 

     // POSITION Y 
     var this_media = parseFloat(lineGraph.linechart_data.prcMedia); 
     var this_max = 100; 

     var this_val_posy = Math.ceil((this_media * (this_container_height - this_margin_y))/this_max); 

     var y_val = (($('.infoMedia').offset().top) - this_val_posy) - ($('.infoMedia').height()/2); 
     $('.infoMedia').css('top', y_val); 
} 
+0

你能可能告訴我你如何添加一個標籤,你的情節主線?謝謝! – AustinT

+0

當用戶滾動或更新位置時,我最終將獨立於圖形的圖標與絕對定位一起放置在邏輯上。 – jose

+0

你是如何計算圖像位置的?你能在這裏發佈你的最終解決方案嗎? – Guian

回答

1

看起來好像有一個useHTML選項的yAxislabels配置,允許使用圖像。

http://api.highcharts.com/highcharts#yAxis.labels.useHTML

+0

是的,有。不幸的是,它可用於yAxis標籤,不適用於yAxis-> plotLines->標籤:( – jose

+2

@jose我意識到,發佈我的答案後,您指的是'yAxis.plotLines.labels'而不是'yAxis.labels '。所有的歉意,它看起來'plotLines.labels'的唯一選項是基本的CSS規則(不包括'background-image'屬性)。 – Joe

1

如果你想在該元素和進一步修改,您可以:

chart.yAxis[0].plotLinesAndBands[0]; 

2)或者:

1)通過圖表對象得到它,通過文本本身在DOM中找到它:

$('#container text:contains("Plot line")') // where container is the ID of the div container and "Plot line" is the text of the plot line