[]
주석은 차트에서 주목할 만한 포인트 또는 영역을 강조 표시하는 데 사용됩니다. 주석을 사용하여 이미지, 모양 및 텍스트와 같은 임의의 요소를 차트에 배치할 수도 있습니다. FlexChart 컨트롤은 직사각형, 사각형, 원, 타원, 선, 다각형, 이미지, 텍스트와 같은 다양한 기본 제공 주석을 지원합니다.
주석은 특정 데이터 포인트에 부착되거나 데이터 또는 페이지 좌표의 임의 포인트에 부착될 수 있습니다.
다음 단계에 따라 FlexChart에 주석을 추가하실 수 있습니다:
예시:
import * as wjChart from '@grapecity/wijmo.chart';
import * as wjAnnotation from '@grapecity/wijmo.chart.annotation';
// add annotation layer
var annotations = new wjAnnotation.AnnotationLayer(myChart);
// attach Ellipse annotation to data point 5
annotations.items.push({
type: 'Ellipse',
content: 'Ellipse',
tooltip: 'This is an <b>Ellipse</b><br/>annotation',
attachment: 'DataIndex',
seriesIndex: 0,
pointIndex: 5,
width: 100,
height: 40,
position: 'Top',
style: {
fill: 'green',
stroke: 'darkgreen',
strokeWidth: 2,
opacity: .25
}
}
);
주석 컬렉션은 AnnotationLayer 생성자에게 매개 변수로 전달될 수도 있습니다.
FlexChart는 다음과 같은 기본 제공 유형의 주석을 지원합니다.
선 주석 예시:
// show a trendline between Jan 31 and Feb 27
annotations.items.push({
type: 'Line',
tooltip: 'This is a <b>Line</b><br/>annotation',
position: 'Center',
attachment: 'DataCoordinate',
start: { x: new Date(2017, 0, 31), y: 810 },
end: { x: new Date(2017, 1, 28), y: 840 },
style: {
stroke: 'darkgreen',
strokeWidth: 4,
opacity: .5 }
}
);
이미지 주석 예시:
// show a map marker image
annotations.items.push({
type: 'Image',
href: 'https://maps.google.com/mapfiles/marker_green.png',
width: 15,
height: 30,
attachment: 'DataCoordinate',
point: { x: new Date(2017, 1, 7), y: 800},
tooltip: 'Time to buy!',
}
);
모든 주석에는 다음과 같은 공통 속성이 있습니다:
FlexChart 주석은 다음과 같은 첨부 기술을 지원합니다.
다음 단계에 따라 특정 데이터 포인트에 주석을 첨부하실 수 있습니다:
예시:
// attach annotation to the 5th data point in first series
annotations.items.push({
type: 'Text',
attachment: 'DataIndex',
seriesIndex: 0,
pointIndex: 5,
text: 'Annotation'
}
);
다음 단계를 수행하여 플롯 좌표계의 어느 곳에나 주석을 부착할 수 있습니다:
예시:
// attach annotation at x: 10, y: 80
annotations.items.push({
type: 'Text',
attachment: 'DataCoordinate',
point: { x: 10, y: 80},
text: 'Annotation'
}
);
주석을 사용하여 차트 영역을 만들 수 있습니다. 영역은 값 범위를 강조 표시하는 데 사용되는 데이터 포인트 뒤에 있는 플롯 영역의 색상 영역입니다.
예를 들어, 아래 차트에는 녹색과 빨간색 직사각형 주석이 표시된 'buy' 와 'sell' 영역이 있습니다:
// add annotation layer with two rectangle annotations
var annotations = new wjAnnotation.AnnotationLayer(myChart, [
{
type: 'Rectangle',
attachment: 'DataCoordinate',
point: { x: new Date(2017, 0, 1), y: 855},
position: 1, // Center Top Bottom Left Right
width: 20000, height: 20000,
style: { fill: 'red', opacity: .15 }
},
{
type: 'Rectangle',
attachment: 'DataCoordinate',
point: { x: new Date(2017, 0, 1), y: 815},
position: 2, // Center Top Bottom Left Right
width: 20000, height: 20000,
style: { fill: 'green', opacity: .15 }
}
]);
데이터 좌표 첨부 파일과 함께 사용할 경우 폴리곤(Polygon) 주석을 통해 모든 모서리 주위에 플롯 경계포인트가 있는 영역을 만들 수 있습니다. 아래 예시는 절대 위치결정된 폴리곤 주석을 보여줍니다.
// add annotation layer with polygon annotation
var annotations = new wjAnnotation.AnnotationLayer(myChart, [
{
type: "Polygon",
content: "Absolute",
position: 0,
style: {
fill: "#FE2E2E",
stroke: "#01A9DB",
fill-opacity: 2,
stroke-width: 4,
stroke-opacity: 1
},
points: [
{ "x": 200, "y": 0 },
{ "x": 150, "y": 50 },
{ "x": 175, "y": 100 },
{ "x": 225, "y": 100 },
{ "x": 250, "y": 50 }
]
}
]);