highcharts添加带有图像的绘图线标签

ecfdbz9o  于 2022-12-13  发布在  Highcharts
关注(0)|答案(4)|浏览(179)

使用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>

Java脚本

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

bttbmeg01#

yAxislabels配置似乎有一个useHTML选项,允许使用映像。
http://api.highcharts.com/highcharts#yAxis.labels.useHTML

fxnxkyjh

fxnxkyjh2#

如果要获取该元素并对其进行进一步修改,可以:
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
7fhtutme

7fhtutme3#

也可以使用渲染器并在任何位置添加图像:
http://api.highcharts.com/highcharts#Renderer.image()

9nvpjoqh

9nvpjoqh4#

下面是一个使用内联svg的示例。
第一个
在Bundler设置中,您还可以导入svg路径,如下所示:

import { mdiImageLockOutline } from '@mdi/js'

const labelConfig = {
 text: `<svg viewBox="0 0 24 24" class="plot-line-icon"><path d="${mdiImageLockOutline}"></path></svg>`,
 useHTML: true,
}

相关问题