2013-12-18 3 views
1

chartWidth 및 chartHeight 속성을 사용하여 차트 로딩 이벤트의 차트 오른쪽 아래에 이미지를 추가하여 왼쪽/위쪽 오프셋을 계산합니다.리사이즈시 하이 차트에 렌더링 된 이미지 이동

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

브라우저 창의 크기가 조정되면 차트의 크기도 조정되지만 이미지는 위에서 설정된 위치로 고정됩니다. 차트의 너비가 축소되면 새 차트 너비를 기준으로 이미지의 위치를 ​​다시 지정하고 싶습니다.

일부 자바 스크립트를 사용하여 요소를 이동할 수 있습니까 아니면 그것을 제거하고 새로운 위치로 위의 호출을 다시해야합니까?

+0

거기에 앵거 4에서 다음을 사용하는 방법은 무엇입니까? –

답변

1

차트와 이미지의 원래 너비에 대한 참조를 저장하는 결과가 발생했습니다. 그런 다음 크기를 조정할 때 두 너비의 오프셋으로 이미지를 이동합니다. -

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

크기를 변경하지 않은 이유는 무엇입니까? 이미지를 제거한 다음 차트의 크기가 조정 된 후에 위치를 다시 계산하고 이미지를 다시 추가해야하는 이유는 무엇입니까?

+3

이런 식으로 : http://jsfiddle.net/4Zhkj/ – Mark

+0

그게 내가 한 일이야. DOM에서 제거하고 새 요소를 다시 추가하는 대신 배치 된 html 요소에 위쪽/왼쪽으로 설정하는 것과 같은 방식으로 이동할 수있는 방법이있을 것이라고 생각했습니다. – mld

관련 문제