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,  // y값 드래그 허용
        dragMinY: 0,       // 0 아래로는 못 내림
        dragMaxY: 100,
        dragPrecisionY: 1  // 정수로 맞춤
      }
    }
  },
  series: [{
    name: "서울",
    data: [60, 40, 20, 80]
  }]
}, {
  append: true,
  redraw: true
});

제공 버전

version desc
7.3.0.0