Move images rendered on highcharts on resize

问题

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.

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?

回答1:

Why not on resize remove the image, then once the chart is done being resized, recalculate the position and add the image back?

回答2:

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

来源：https://stackoverflow.com/questions/20664410/move-images-rendered-on-highcharts-on-resize