在调整大小时移动在高图上呈现的图像 [英] Move images rendered on highcharts on resize

问题描述

我使用chartWidth和chartHeight属性在图表加载事件的图表右下角添加图像，以计算左/顶部偏移量。

I'm adding an image to the lower right hand corner of a chart in the chart loading event using the chartWidth and chartHeight properties to calculate the left / top offsets.

chart.renderer.image('img.png', left, top, 30, 30).add();

浏览器窗口调整大小时，也会调整大小，但图像保持固定在上面设置的位置。当图表缩小宽度时，我想根据新的图表宽度重新定位图像。

When the browser window resizes the chart also resizes, but the image remains fixed at the position set above. When the chart shrinks in width, I'd like to re-position the image based on the new chart width.

是否可以使用某个javascript或我必须删除它，并再次使用新位置进行上述调用吗？

Is it possible to move the element using some javascript or do I have to remove it and make the above call again with the new position?

推荐答案

我最终存储了对图表的原始宽度和图像。然后在调整大小时，我将图像移动了两个宽度的偏移量 -

I ended up storing a reference to the original width of the chart and the image. Then on resize, I'm shifting the image by the offset of the two widths -

var img, originalWidth;

function chartLoad(chart) {
  var top = 100, left = 100;

  originalWidth = chart.chartWidth;
  img = chart.renderer.image('img.png', left, top, 30, 30).add();
}

function chartResize(e) {
  var offset = e.target.chartWidth - originalWidth;
  img.translate(offset, 0);
}

这篇关于在调整大小时移动在高图上呈现的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！