highcharts add plotline label with images

问题

Using Highchart.js

is it possible to add an image to a plotline label? Something as shown below

I want to add this (i) image along with a tooltip, but it seems (from here) that the limited set of html available for this elements does not support images, divs, or titles.

I've figured that it would be easier to add this image and tooltip on a separated div (from graph), find the position of the label and use absolute positioning to add this layer. But I can't add any id or something to this element, so I can't find its position.

Has someone had similar issues?

My Solution:

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);
}

回答1:

It looks like there is a useHTML option for the yAxis labels configuration that allows the use of images.

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

回答2:

If you want to get at that element and modify it further, you can:

1.) Get it through the chart object:

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

2.) Or, find it in the DOM by the text itself:

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

回答3:

You can also use renderer and add image in any position:

http://api.highcharts.com/highcharts#Renderer.image()

来源：https://stackoverflow.com/questions/15791918/highcharts-add-plotline-label-with-images

标签

Highcharts