편집 가능한 주석
이 페이지에서는 FlexChart에 주석을 표시하고 편집하는 방법을 보여 줍니다.
이 샘플에서 지원되는 주석 편집 작업은 다음과 같습니다.
- 차트 왼쪽 위에 있는 버튼을 클릭하여 미리 정의된 주석 유형과 스타일 중 하나를 선택할 수 있습니다. 그런 다음, 차트의 plot 영역을 클릭하여 주석을 추가하고 크기를 조정합니다.
- 데이터 좌표 버튼(맨 왼쪽)을 클릭하여 추가한 주석의 첨부 파일을 Absolute와 DataCoordinate 중에서 선택할 수 있습니다.
- 새 버튼을 추가하여 새 주석 유형과 스타일을 코드로 만들 수 있습니다(노란색 삼각형 버튼은 사용자 정의 버튼이며 수동으로 추가된 것임).
- 차트에서 주석을 끌 수 있습니다.
- 주석을 두 번 클릭하여 텍스트를 편집할 수 있습니다.
- 'x' 버튼을 사용하여 주석을 삭제할 수 있습니다.
app.js
index.html
data.js
styles.css
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as core from '@mescius/wijmo';
import * as chart from '@mescius/wijmo.chart';
import * as annotation from '@mescius/wijmo.chart.annotation';
import { getData } from './data';
import { EditableAnnotationLayer, Button } from './EditableAnnotationLayer';
import { AxisScrollbar } from './AxisScrollbar';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create the chart
let al;
let chkbox = document.querySelector('#checkboxIsEditable');
chkbox.addEventListener('change', () => {
al.isEditable = chkbox.checked;
});
let theChart = new chart.FlexChart('#theChart', {
bindingX: 'x',
chartType: 'Scatter',
itemsSource: getData(),
tooltip: {
content: ''
},
series: [
{
name: 'Data',
binding: 'y'
}
],
rendered: () => {
if (!al) {
al = new EditableAnnotationLayer(theChart);
al.isEditable = chkbox.checked;
//add customize button
var triangle, triangleBtn = new Button(function (engine) {
var triangleIcon = new annotation.Polygon({
tooltip: 'Custom Button - Triangle </br>Select to add Triangle Annotation.',
points: [{
x: 10, y: 5
}, {
x: 5, y: 15
}, {
x: 15, y: 15
}],
style: {
fill: 'yellow'
}
});
triangleIcon.render(engine);
return triangleIcon._element;
}, function (point, isDataCoordinate) {
var x = isDataCoordinate ? point.dx : point.x, y = isDataCoordinate ? point.dy : point.y;
triangle = new annotation.Polygon({
attachment: isDataCoordinate ? annotation.AnnotationAttachment.DataCoordinate : annotation.AnnotationAttachment.Absolute,
tooltip: 'Customize Annotation - Triangle',
points: [{
x: x, y: y
}, {
x: x, y: y
}, {
x: x, y: y
}],
style: {
fill: 'yellow'
}
});
al.items.push(triangle);
}, function (originPoint, currentPoint, isDataCoordinate) {
var ox = isDataCoordinate ? originPoint.dx : originPoint.x, oy = isDataCoordinate ? originPoint.dy : originPoint.y, cx = isDataCoordinate ? currentPoint.dx : currentPoint.x, cy = isDataCoordinate ? currentPoint.dy : currentPoint.y, offsetX = Math.abs(cx - ox), offsetY = cy - oy, isXDate = core.isDate(ox), isYDate = core.isDate(oy), oaDate = chart.FlexChart._fromOADate;
triangle.points.clear();
triangle.points.push({ x: ox, y: isYDate ? oaDate(oy - offsetY) : oy - offsetY });
triangle.points.push({ x: isXDate ? oaDate(ox - offsetX) : ox - offsetX, y: isYDate ? oaDate(oy - 0 + offsetY) : oy + offsetY });
triangle.points.push({ x: isXDate ? oaDate(ox - 0 + offsetX) : ox + offsetX, y: isYDate ? oaDate(oy - 0 + offsetY) : oy + offsetY });
});
al.buttons.push(triangleBtn);
//add pre-defined annotations.
var watermarker = new annotation.Text({
position: annotation.AnnotationPosition.Left | annotation.AnnotationPosition.Top,
attachment: annotation.AnnotationAttachment.Relative,
text: 'watermarker',
tooltip: 'Text Watermarker',
point: { x: 1, y: 1 },
style: { 'fill': '#cccccc', 'font-size': '30px', opacity: 0.2 }
});
al.items.push(watermarker);
var imgmarker = new annotation.Image({
position: annotation.AnnotationPosition.Right | annotation.AnnotationPosition.Top,
attachment: annotation.AnnotationAttachment.Relative,
tooltip: 'Image Watermarker',
point: { x: 0, y: 1 },
width: 128,
height: 33,
href: 'resources/wijmo-logo-text.png',
style: { opacity: 0.2 }
});
al.items.push(imgmarker);
var centerHLine = new annotation.Line({
attachment: annotation.AnnotationAttachment.DataCoordinate,
position: annotation.AnnotationPosition.Center,
content: 'Vertical Center Line',
start: { x: 50, y: 0 },
end: { x: 50, y: 1000 },
style: {
'stroke-width': '2px',
stroke: 'green'
}
});
al.items.push(centerHLine);
var centerVLine = new annotation.Line({
attachment: annotation.AnnotationAttachment.Relative,
position: annotation.AnnotationPosition.Center,
content: 'Horizontal Center Line',
start: { x: 0, y: 0.5 },
end: { x: 1, y: 0.5 },
style: {
'stroke-width': '2px',
stroke: 'red'
}
});
al.items.push(centerVLine);
var topRange = new annotation.Polygon({
attachment: annotation.AnnotationAttachment.Relative,
points: [{ x: 0, y: 0 }, { x: 0, y: 0.2 }, { x: 1, y: 0.2 }, { x: 1, y: 0 }],
content: 'Top Range',
style: { fill: '#FEF0DB', opacity: 0.5, stroke: '#FEF0DB' }
});
al.items.push(topRange);
//flag
var pointIndex = 10;
['black', 'blue', 'green', 'red', 'yellow'].forEach(function (v) {
var flagSrc = 'resources/flag-' + v + '-icon.png';
var flag = new annotation.Image({
attachment: annotation.AnnotationAttachment.DataIndex,
seriesIndex: 0,
pointIndex: pointIndex,
width: 24,
height: 24,
href: flagSrc
});
al.items.push(flag);
pointIndex += 10;
});
var rect = new annotation.Rectangle({
attachment: annotation.AnnotationAttachment.DataCoordinate,
point: { x: 10, y: 650 },
width: 120,
height: 150,
style: {
'stroke-dasharray': '4 4',
stroke: 'red'
}
});
al.items.push(rect);
var circle = new annotation.Circle({
seriesIndex: 0,
attachment: annotation.AnnotationAttachment.DataCoordinate,
radius: 80,
point: { x: 70, y: 350 },
style: {
stroke: 'blue',
fill: 'blue',
opacity: 0.3
}
});
al.items.push(circle);
}
}
});
let axisScrollBar = new AxisScrollbar(theChart.axes[0]);
window.setTimeout(function () {
axisScrollBar.maxPos = 0.5;
}, 20);
}