dragDrop (plotOptions properties)
마우스로 포인트를 끌어서 값을 바꿀 수 있게 설정합니다.
드래그 모듈(modules/draggable-points.js)을 추가로 include 해야 합니다. 드래그 과정은 pointDragStart, pointDrag, pointDrop 이벤트로 처리합니다.
선(line)이나 산점(scatter) 차트는 포인트를 직접 끌어서 옮기고, 막대(column, bar) 차트는 마우스를 올리면 막대 끝에 나타나는 손잡이를 끌어서 값을 바꿉니다.
Info
| name |
type |
required(default) |
description |
| dragDrop |
object |
선택(undefined) |
마우스로 포인트를 끌어서 값을 바꿀 수 있게 설정합니다. |
| dragDrop.draggableX |
boolean |
선택(false) |
x값 드래그 허용 |
| dragDrop.draggableY |
boolean |
선택(false) |
y값 드래그 허용 |
| dragDrop.dragMinX |
number |
선택(undefined) |
x값 최소 한계 |
| dragDrop.dragMaxX |
number |
선택(undefined) |
x값 최대 한계 |
| dragDrop.dragMinY |
number |
선택(undefined) |
y값 최소 한계 |
| dragDrop.dragMaxY |
number |
선택(undefined) |
y값 최대 한계 |
| dragDrop.dragPrecisionX |
number |
선택(0) |
x값 단위 (예: 1이면 정수로 맞춤, 0이면 제한 없음) |
| dragDrop.dragPrecisionY |
number |
선택(0) |
y값 단위 |
| dragDrop.dragSensitivity |
number |
선택(2) |
드래그로 인식할 최소 이동 거리(px) |
| dragDrop.liveRedraw |
boolean |
선택(true) |
드래그 중 값을 실시간으로 반영할지 여부. false이면 놓을 때 적용되며, pointDrop에서 취소할 수 있음 |
Example
myChart.setOptions({
chart: {
type: "column"
},
plotOptions: {
series: {
dragDrop: {
draggableY: true,
dragMinY: 0,
dragMaxY: 100,
dragPrecisionY: 1
}
}
},
series: [{
name: "서울",
data: [60, 40, 20, 80]
}]
}, {
append: true,
redraw: true
});
제공 버전