highcharts添加剧情标签与图像 [英] highcharts add plotline label with images

问题描述

使用Highchart.js

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

我想将这个（i）图像与工具提示一起添加，但似乎（来自 here ）可用于此元素的有限html集不支持图片，div或标题。

我认为将图像和工具提示添加到独立的div（从图表）中会更容易，找到标签的位置并使用绝对定位添加此图层。但是我不能添加任何id或者什么东西给这个元素，所以我找不到它的位置。

有人有类似的问题吗？

我的解决方案：

CSS

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

HTML $ b

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

javascript
< pre $ function processHintPosition（）//每次调整大小，调用这个函数
{
$（'。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;

$ b $（'。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）; $（$。b
var y_val =（（$（'。infoMedia'）。offset（）。top） - this_val_posy） - （$（'。infoMedia'）。height（）/ 2）;
$（'。infoMedia'）。css（'top'，y_val）;



解决方案

如果您想获得您可以：

1。）通过图表对象获取它：

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

<2>。）或者，通过文本本身在DOM中找到它：

  $（'＃container text：contains（Plot line）'）//其中container是div容器的ID，Plot line是情节线的文本
  

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

解决方案

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

这篇关于highcharts添加剧情标签与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！