autoscale을 사용한 간단한 플롯 알고리즘

Question

간단한 플롯 구성 요소를 C# (WPF가 더 정확함)로 구현해야합니다. 내가 가진 것은 시간 (X 축)과 값 (두 가지 유형 모두)을 포함하는 데이터 샘플 모음입니다.

고정 된 크기 (너비 x 높이)의 그리기 캔버스와 그릴 수있는 DrawLine 메서드/함수가 있습니다. 지금 직면하고있는 문제는 자동 축소되도록 음모를 그리는 방법입니다. 즉, 내가 가지고있는 샘플을 너비 x 높이 캔버스에 실제 픽셀로 매핑하는 방법은 무엇입니까?

Answer 1

작동하는 해킹 방법 중 하나는 Viewbox 컨트롤을 사용하는 것입니다. 이 컨트롤은 사용 가능한 크기에 맞게 내용의 렌더링 크기를 조절합니다. 그러나 이렇게하면 선과 라벨이 너무 두껍거나 얇아 보일 수 있습니다.

아마도 더 현명한 방법은 처음부터 그래프를 그릴 때 어떤 규모로 작업해야 하는지를 이해하는 것입니다. 이를 위해 주어진 축에있는 값 범위를 계산하십시오 (예를 들어, Y 축 값의 범위는 0에서 100까지입니다). 해당 축의 사용 가능한 도면 공간을 작업하십시오 (예 : 캔버스의 높이가 400 픽셀 일 수 있음). 그래프를 그릴 때 Y 축 "축척 비율"은 <available space>/<data range>이거나이 경우 4입니다.

캔버스가 '왼쪽 상단 주어진 데이터 포인트의 Y 위치를 계산하기 때문에, 당신은 다음과 같이 계산합니다 제로에서 시작 좌표

:

이

double availableSpace = 400.0; // the size of your canvas 
double dataRange = 100.0;  // the range of your values 
double scaleFactor = availableSpace/dataRange; 

double currentValue = 42.0; // the value we're trying to plot 
double plottableY = availableSpace - (currentValue * scaleFactor); // the position on screen to draw at 

plottableY의 값은 Y입니다 당신이 캔버스에이 점을 그리는 데 사용할 좌표.

(당연히이 코드는 드로잉 방법 전체에 퍼져 있어야 각 점의 값을 모두 다시 계산하지 않아도되지만 수학을 보여줍니다.)