작성일 2022-11-21 09:43 조회 1,044회
댓글 1건
Line 주석과 같이 실행되며 끝 부분을 화살표 모양이 필요한데요
Line 주석의 끝 부분을 화살표 모양으로 변경이 가능할까요?
작성일
2 답변
작성일 2022-11-29 15:26 댓글 2건
안녕하세요 그레이프시티입니다.
먼저 답변이 지연된 점 죄송합니다.
문의 주신 Wijmo 차트 라인 주석을 커스터마이징하여 화살표 주석을 구현하는 방법에 대해 안내 드립니다.
해당 기능을 구현하기 위해서 주석의 Line을 추가적으로 생성한 뒤, 포인트 위치에 따른 각을 계산하고 start,end 포인트의 위치를 설정하시면 됩니다.
EditableAnnotationLayer 의 Line 주석 생성 영역을 참고하여 주시기 바랍니다.
// 각 계산
var radians = Math.atan2(cx - ox, cy - oy);
var result = (radians * (180 / Math.PI) * -1) + 90;
let a =result;
a *= Math.PI / 180;
let szar = 8;
let x1 = szar * Math.cos(a - 100);
let y1 = szar * Math.sin(a - 100);
let x2 = szar * Math.cos(a + 100);
let y2 = szar * Math.sin(a + 100);
arrowline.start = new wijmo.chart.DataPoint(cx-x1, cy-y1);
arrowline.end = new wijmo.chart.DataPoint(cx, cy);
arrowline_two.start = new wijmo.chart.DataPoint(cx-x2, cy-y2);
arrowline_two.end = new wijmo.chart.DataPoint(cx, cy);
// add arrow line end ##############################################만일 해당 주석을 삭제하고 싶은 경우, 화살표 선들이 별도 객체로 생성되었기 때문에 Line 객체의 name을 설정하여 동일한 name일 경우 삭제하도록 아래 코드와 같이 설정해주시면 됩니다.
if (del) {
// for removing arrow Notations lines
for(let i=0; i< self.items.length; i++){
let item = self.items[i];
if(item.name == anno.name){
self.items.removeAt(i);
i--;
}
}자세한 코드는 아래 샘플에서 확인하실 수 있습니다.
다만 아래 이미지와 같이 Data Coordinate 버튼을 활성화하여 attachment를 Absolute가 아닌 DataCoordinate로 설정한 뒤 화살표 주석 추가 시 화살표 영역을 그리는 데 이슈가 발생하여 추가적으로 본사 개발팀과 확인 중에 있으며 업데이트가 있는 대로 답변 드리도록 하겠습니다.
API 문서를 전달드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
답변이 지연되어 죄송합니다.
감사합니다.
그레이프시티 드림
작성일
작성일
작성일 2022-12-09 16:05 댓글 0건
안녕하세요 그레이프시티입니다.
먼저 답변이 지연되어 죄송합니다.
이슈를 해결하기 위해 기존의 화살표 주석을 만드는 방법보다는 아래 코드와 같이 라인 주석에서 상속된 클래스를 만들고 해당 클래스를 통해 화살표 주석을 생성하여 구현해보시기 바랍니다.
class ArrowLine extends annotation.Line { _renderShape(engine) { super._renderShape(engine); // start and end in pixel coordinates const start = this._cS; const end = this._cE; const len = 10; // arrow length const angle = Math.PI / 6; // arrow angle const a = Math.atan2(start.y - end.y, start.x - end.x); const p1 = new core.Point( end.x + len * Math.cos(a - angle), end.y + len * Math.sin(a - angle) ); const p2 = new core.Point( end.x + len * Math.cos(a + angle), end.y + len * Math.sin(a + angle) ); // draw arrow at the end point engine.drawLine(end.x, end.y, p1.x, p1.y, null, this.style); engine.drawLine(end.x, end.y, p2.x, p2.y, null, this.style); }} |
아래 샘플 다운로드 링크를 공유드리오니 다운로드 후 코드 및 결과를 확인해보시기 바랍니다.
다시 한번 답변 지연 및 불편을 드려 죄송합니다.
감사합니다.
그레이프시티 드림
등록된 댓글이 없습니다.
