안녕하세요 그레이프시티입니다.

문의 주신 내용에 대해 답변드립니다.

FlexChart 컨트롤의 주석을 이용하여 범례가 서로 다른 스플라인 기호의 사이에 화살표를 표시할 수 있습니다.

화살표 형태의 주석의 경우, type 속성이 Polygon 인 주석의 points 속성을 지정하여 구현하시면 됩니다.

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현되었습니다.

1. chartType 속성이 'SplineSymbols' 인 FlexChart 컨트롤을 생성하고 변수 annots 을 선언합니다.
2. 변수 annots 에 아래의 코드와 같이 반복문을 이용하여 생성할 주석의 속성 값들을 저장합니다.
   이때, attachment 속성을 'DataCoordinate' 로 설정하여 FlexChart 컨트롤에 바인딩 된 데이터 좌표를 기준으로 points 속성 값을 지정하도록 구현합니다. 
   샘플의 37~52번 라인에서 아래의 코드를 확인해 보실 수 있습니다.
   

   for(var i = 0;i<data.length;i++){
       annots.push({
         type: 'Polygon',
         tooltip: '화살표',
         attachment: 'DataCoordinate',
         points:[
           {x:i-0.2,y:data[i].high-2},
           {x:i,y:data[i].high}, // 범례가 Average High 인 스플라인 기호의 point
           {x:i+0.2,y:data[i].high-2},
           {x:i,y:data[i].high},
           {x:i,y:data[i].low}, // 범례가 Average low 인 스플라인 기호의 point
           {x:i,y:data[i].high}
         ],
         style: { fill: '#01DFD7', stroke: 'rgba(255, 100, 100, 0.5)', strokeWidth: 2 }
       })
     }

3. 변수 annots를 이용하여 주석을 생성합니다.

- 주석 데모

- FlexChart 주석 도움말 문서

- 데이터 좌표로 주석 첨부 도움말 문서

- Polygon API 문서

- attachment API 문서

- AnnotationAttachment Enumeration DataCoordinate API 문서

API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림