2016-08-10 2 views
1

시리얼 amchart를 사용하여 작성한 카테고리 선 그래프가 있습니다. 나는 커서 그렇게 같은 카테고리 가리킬 때 그렇게 범주에있는 모든 점의 크기가 두 배로 만들어 :amcharts에서 커서를 가져 가면 점을 앞으로 가져 오는 방법이 있습니까?

"chartCursor": { 
          "categoryBalloonEnabled": false, 
          "cursorAlpha": 1, 
          "zoomable": true, 
          "graphBulletSize": 3, 
          "animationDuration": .1, 
          "fullWidth": true, 
          "valueLineAlpha" : .1, 
          "oneBalloonOnly": true 
      }, 

유일한 문제는 크기가 증가하는 것은 더 아래에있는 점과 총알 중복을 만드는 경우 시리즈에서, 후자의 점은 확대 된 이미지 위에 차트의 최전선에 남아 있습니다. 실제로 필요한 정보가 들어있는 사용자 지정 글 머리 기호를 사용하기 때문에 좋지 않습니다. 내 질문은 : 일시적으로 커서로 수정 한 지점을 그래프 앞쪽으로 가져 와서 이미지가 장애없이 보이도록 할 수 있습니까?

풍선으로 이미지를 넣을 수 있다는 것을 알고 있지만 차라리 그렇게하지 않을 것입니다.

답변

1

글 머리 기호는 SVG 트리의 일부이므로 기술적으로 SVG에서 요소의 "z- 색인"을 설정하는 방법은 없습니다 (각 후속 노드는 이전 노드 위에 그려집니다). 유일한 방법은 이동에 관한 차트에서 총알의 실제 순서를 조작하는 것입니다.

"listeners": [ { 
    "event": "changed", 
    "method": function(e) { 
    if (e.index === undefined) 
     return; 
    for (var i = 0; i < e.chart.graphs.length; i++) { 
     // get graph 
     var graph = e.chart.graphs[ i ]; 
     var holder = graph.bulletSet.node; 

     // find the bullet and move it 
     for (var x = 0; x < graph.allBullets.length; x++) { 
     var bullet = graph.allBullets[ x ]; 
     if (bullet.graphDataItem.index === e.index) { 
      holder.appendChild(bullet.node); 
      break; 
     } 
     } 
    } 
    } 
} ] 

은 위의 코드는 현재 각각의 용기의 끝 부분에 공중 선회되는 카테고리의 글 머리 기호를 이동합니다, 그래서 그들은 위에 그려집니다 : 우리는 차트 커서의 changed 이벤트를 사용할 수에 대한

다른 총알.

여기는 working example입니다.

+0

이 시리즈는 1 개의 시리즈가 있으면 제대로 작동하지만 어떻게 든 홀더에서 충돌합니다 .appendChild (bullet); Uncaught TypeError : 'Node'에서 'appendChild'를 실행하지 못했습니다. 매개 변수 1의 유형이 'Node'가 아닙니다. 내가 여러 시리즈를 가지고있을 때. 첫 번째 카테고리가 선택되면 작동하지만 점의 크기가 증가하면 오류가 발생하고 전체 페이지가 정지합니다. –

+0

좋아, 여러 시리즈로 테스트 해 보겠습니다. – martynasma

+0

흠, 여러 그래프로 나에게 완벽하게 잘 작동합니다. http://codepen.io/team/amcharts/pen/43611645554e924eafabde989eabe4a6 글 머리 기호가없는 윤곽이 있습니까? – martynasma

관련 문제