如何在highcharts中缩放缩放事件上的svg路径？

Question

I have built a module so that a user can draw an svg line over a highchart using the Renderer. But when the user zooms into the highchart, the size and position of the drawn line do not change.

I need these attributes of the line to change as well, like if the user zooms into the chart, the position of the points of the line should be recalculated, and the updated line should be shown.

For example in the following fiddle:
http://jsfiddle.net/kXKB8/

chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add();

I need the red svg line to resize accordingly when I change the slider

Is there a function for doing this, or do I have to code manually?
If I have to do it manually, please give me an idea of how I can proceed.

Answer 1

您可以捕获调整大小的$(window).resize(function{ //... }) ，然后销毁对象并添加具有新计算位置/大小的新对象。