2

使用 Highchart.js

是否可以将图像添加到情节线标签？如下图所示

在此处输入图像描述

我想添加此 (i) 图像和工具提示，但似乎（从此处）可用于此元素的有限 html 集不支持图像、div 或标题。

我认为将这个图像和工具提示添加到一个单独的 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);
}
4

3 回答 3

1

看起来有一个允许使用图像useHTML的配置选项。yAxis labels

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

于 2013-04-03T15:48:52.097 回答
1

如果您想获取该元素并进一步修改它，您可以：

1.) 通过图表对象获取：

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

2.) 或者，通过文本本身在 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
于 2013-04-03T16:37:57.763 回答
0

您还可以使用渲染器并在任何位置添加图像：

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

于 2013-04-04T12:15:16.823 回答