[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

FlexChart 확대

유연한 API를 활용하여 FlexChart에서 확대/축소를 쉽게 구현할 수 있습니다. 가장 쉬운 방법은 버튼을 사용하거나 마우스 휠을 스크롤하여 확대/축소하는 것입니다. 두 가지 접근법 모두 차트 축의 최소/최대 속성을 변경하여 작동합니다.


아래 예시에는 applyZoom 와 _applyZoomAxis_의 두 가지 메서드가 포함되어 있습니다. applyZoom 메서드는 각 축에 대해 단순히 다른 하나를 호출합니다. _applyZoomAxis_를 사용하여 단일 축만 확대/축소할 수 있습니다. 메서드는 확대/축소 비율과 확대/축소할 위치의 중심이 필요합니다. 확대/축소 비율은 확대의 경우 <축소의 경우 1이고>1이어야 합니다.

// apply a zoom factor to the chart (keeping the center constant)
 function applyZoom(chart, factor, center) {
  	applyZoomAxis(chart.axisX, factor, center ? center.x : null);
    applyZoomAxis(chart.axisY, factor, center ? center.y : null);
	}
 function applyZoomAxis(axis, factor, center) {
  	if (!factor) { // reset
    	axis.min = axis.max = null;
    } else {
    	var min = (axis.min != null ? axis.min : axis.actualMin).valueOf();
      var max = (axis.max != null ? axis.max : axis.actualMax).valueOf();
      if (center == null) {
      	center = (min + max) /2;
      }
      axis.min = center - (center - min) * factor;
      axis.max = center + (max - center) * factor;
    }
  }

마우스 휠로 확대/축소

다음으로, 위의 메서드을 사용하여 마우스 휠로 확대/축소를 구현해 보겠습니다. 이 예시의 휠 확대/축소는 차트의 중심이 아닌 마우스 포인터 주변에서 수행됩니다. 확대/축소 비율은 마우스 deltaY가 0보다 크거나 작은지에 따라 결정됩니다.

// zoom with the mouse wheel
myChart.hostElement.addEventListener('wheel', function(e) {
  if (e.ctrlKey) {
	var center = theChart.pointToData(e.clientX, e.clientY);
  	applyZoom(theChart, e.deltaY > 0 ? 1.1: .9, center);
    	e.preventDefault();
    }
  })

버튼으로 확대/축소

차트 축의 최소/최대 속성을 변경하여, 작동하는 "Zoom In" 과 "Zoom Out" 버튼을 추가할 수 있습니다. 버튼을 사용하면, 차트가 중앙을 중심으로 확대/축소됩니다. 이 예시에서는 확대/축소 인수로 'null'을 전달하여 확대/축소를 재설정하는 방법도 보여줍니다.

// zoom logic
  document.getElementById('btnZoomIn').addEventListener('click', function () {
  	applyZoom(theChart, .9)
  });
  document.getElementById('btnZoomOut').addEventListener('click', function () {
  	applyZoom(theChart, 1.1)
  });
  document.getElementById('btnResetZoom').addEventListener('click', function () {
    applyZoom(theChart, null);
	});

박스 드래그로 확대/축소

또 다른 인기 있는 확대/축소 기술은 마우스로 상자를 드래그하는 것입니다. FlexChart를 사용해서도 구현할 수 있습니다. 이를 확인하기 가장 좋은 방법은 데모입니다.