Highcharts : 반전 차트에서 마커 회전 사용 안함

highcharts.js로 축이 반전 된 (y는 수평, x는 수직 임) 차트가 생성되었습니다. 차트에는 두 개의 그림이 있습니다. 하나는 표식으로 그림이있는 산점도입니다. 내가 가지고있는 문제는 차트가 거꾸로 표시 될 때 마커가 기본적으로 90도 회전된다는 것입니다. 거꾸로 된 축이있는 차트에서 마커를 회전시키지 않는 방법이 있습니까?Highcharts : 반전 차트에서 마커 회전 사용 안함

출처

2013-02-25 Knut Marius

'url (graphic.png)'을 사용하여 마커를 지정하고 있습니까? – Mark

예, marker.symbol의 값으로 url (graphic.png)을 사용하고 있습니다. –

가장 간단한 방법으로 이미지를 미리 회전하여 Highcharts가 회전 할 때 방향을 원하는대로 지정할 수 있습니다. – Mark

여기

function rotateMarker() 
{ 
    $.each($('.highcharts-markers').children(), function(){ 
     var marker = $(this); 
     // rotate 90 degrees around the middle point of the marker 
     var rotateAttr = 'rotate(90,'+(parseFloat(marker.attr('x'))+parseFloat(marker.attr('width'))/2)+','+marker.attr('y')+')'; 
     marker.attr('transform',rotateAttr); 
    }); 
}

다음 문제는 음모가 완전히 렌더링 될 때까지이 코드를 실행할 수 없습니다입니다 ... 내가 가지고 올 수있는 것이 가장 좋습니다. 하이 차트 애니메이션을 사용하면 setTimeout에 놓아야합니다.

바이올린 here 참조. 내가 원래 왼쪽에서 오른쪽으로 동일 이미지로 작업 한

응답 코멘트입니다. "거울"문제에 대해 270도 회전시켜 원본과 같은 방향으로 갈 수 있습니까?

업데이트 된 바이올렛 here을 참조하십시오.

출처

2013-02-27 16:44:39 Mark

이것은 매우 좋다! 고마워! 이제 문제는 이미지가 미러링 된 것처럼 보이기 때문에 또 다른 변형을해야한다고 생각합니다. 다른 SO 질문 (아래 링크 참조)에 따르면이 작업을 수행하기 위해 눈금과 번역 기능을 결합해야하지만 상자 밖에서 작동하지는 않습니다. 다시 말하지만, 'translate (0,'+ marker.attr ('width') + ') scale (1, -1)'을 적용하면 아이콘이 보이는 영역 밖으로 밀려납니다. 우연히 이것에 대한 제안도 있으십니까? 참조 : http://stackoverflow.com/questions/3846015/flip-svg-coordinate-system –

@KnutMarius는 미러링되었거나 올바른 방향으로 있지 않습니까? 위의 수정 사항을 참조하십시오. – Mark

안타깝게도 이미지를 회전해도 회전 각도에 관계없이 미러 문제가 해결되지 않습니다. 최신 피들의 아이콘을 보면 버그의 큰 눈이 범례의 오른쪽에 있고 차트의 왼쪽에 있다는 것을 알 수 있습니다. 이 아이콘이 특히 중요한 이유는 그들이 편지를 가지고 있기 때문입니다. 아이콘에 또 다른 변형을 적용 할 필요가있는 것을 보았을 때, 회전뿐만 아니라 마지막 설명에서 언급 된 축척 + 평행 이동이 의도 한대로 작동하지 않았습니다. –

var markers= document.getElementsByClassName("highcharts-markers"); 
for(var i= 0; i< markers.length; i++) { 
    var items= markers[i].childNodes; 
    for(var j= 0; j< items.length; j++) { 
     var bbox= items[j].getBBox(); var cx= bbox.x+ bbox.width/2; var cy= bbox.y+ bbox.height/2; 
     items[j].setAttribute("transform", "rotate(90" + ", " + cx + ", " + cy + ")"); 
    } 
    } 
}

출처

2017-07-26 00:03:59 ngzhongcai

Highcharts : 반전 차트에서 마커 회전 사용 안함

답변

관련 문제