프로에센셜 데이터 시각화의 2D 및 3D 갤러리

아래 차트에 대한 내용은 예제 프로젝트 및 데모의 예제 030번을 참조하십시오.

이 예에서는 개발자가 x축을 따라 여러 y축과 비연속 일시를 이용하여 하이차트(Open-High-Low-Close), 캔들스틱(Candlestick), 박스플롯(BoxPlot) 차트를 생성하는 방법을 설명합니다. 일시 x축에는 날짜 형식 지정에 여러 가지 옵션이 있으며, 이 예에서는 3글자 영문 월표기와 일 수를 보여 줍니다. 이 예제를 다운로드하여 실행할 때 테이블 주석 핫스팟을 사용하여 데이터를 변경하는 방법과 실시간 테이블 주석 업데이트를 시연하는 방법도 보여줍니다.

프로그래밍 방식으로 제어하거나 최종 사용자가 표시할 서브셋(시리즈)을 제어하면, 필요에 따라 여러 축이 자동으로 숨김-재구성 표시됩니다. 대부분의 과학 분야 차트는 유사한 다중 및/또는 중복 y축이 필요한 경우가 많습니다.

아래는 더 작은 날짜 범위로 확대된 위 차트를 보여줍니다. 차트 영역의 맨 아래 X축과 맨 위를 따라 훨씬 고밀도의 날짜 레이블을 확인합니다. 확대/축소는 마우스 휠을 회전하거나 마우스 왼쪽 버튼을 클릭하여 확대/축소 상자를 끄는 방식으로 수행됩니다.

아래는 그래프 주석을 훌륭하게 사용하여 파이낸셜 스터디를 구현한 구현한 고객의 차트입니다.

아래는 웰보어 데이터의 3d 차트 작성입니다. 웰보어(wellbore)는 석유, 가스, 물을 포함한 천연자원의 탐사와 채굴을 돕기 위해 뚫는 구멍입니다.

예제 프로젝트 및 데모의 예 403번을 참조하십시오.

녹색 튜브는 라인 타입의 그래프 주석이며 간단한 선을 따리 이동하는 메커니즘을 통해 구현됩니다. 이 선형 주석은 실제 선 또는 튜브로 렌더링할 수 있습니다. 차트 컴포넌트 내부에서 튜브는 GPU 지오메트리 셰이더를 통해 구성되므로 점당 4개의 꼭짓점, 즉 튜브 세그먼트 스팬을 제어하는 2개의 꼭짓점과 튜브 끝이 결합되는 방식을 제어하는 2개의 인접 꼭짓점만 필요합니다. 그런 다음 지오메트리 셰이더가 128개의 꼭짓점을 삽입하여 튜브 본체 세그먼트를 형성합니다.

3D 그래프 주석 텍스트는 항상 2D 및 2D로 뷰어를 향하며 다른 주석, 서브셋 및 축 레이블을 피합니다. 그래야만 하는 것처럼, 정말 최고의 등급 차트 작성 요소에서 매우 능란합니다.

또한 최종 사용자에게 웰보어 좌표를 안내하는 툴팁 기능도 보여드립니다. 표준 윈도우 도구 설명에서 제공하는 모든 기능을 조정할 수 있는 속성을 제공합니다.

이 데모를 직접 실행하여 숫자 키를 0에서 9로 누르고 우물을 따라 드릴 동작의 애니메이션을 호출합니다.이 차트를 처음 두 번 클릭하여 자동 회전 기능을 시작한 다음 0에서 9를 누르면 우물을 따라 카메라를 360도 회전하면서 우물을 따라 이동하는 보기에 애니메이션이 적용됩니다.아주 매끄럽고 꼭 봐야 해이것은 여러분이 걱정할 필요가 없는 복잡한 삼각법과 행렬 수학적 변환을 나타냅니다.

다음 차트는 다른 색상 스타일을 보여주는데 하단의 2D 등고선 대신 하단의 2D 컬러 지형을 보여 줍니다. 소프트웨어의 최종 사용자도 선택적으로 사용할 수 있는 주석 레이블을 표시/숨김할 수 있는 간단한 속성이 있습니다.

차트 설명서에서 'ShowContour' 및 'ShowAnnotationText' 속성 검색하기

다음 예시는 데모에 나와 있지 않지만, 저희의 고객분이 2D 열 지도 / 2D 등고 / 스펙트로그램 구현하여 보내주신 겁니다. 스펙트로그램은 시간에 따라 변화하는 신호의 주파수 스펙트럼을 시각적으로 표현한 것입니다.

예제 프로젝트 및 데모의 예 139, 120, 121 및 122번에서 유사한 차트를 참조하십시오.

위의 차트도 동일하지만 확대하여 자세한 내용을 볼 수 있습니다. 프로에센셜 차트는 두 가지 줌 방식을 제공합니다.

• 마우스를 우클릭한 채로 드래그 해서 영역을 선택하세요.
• 마우스의 휠을 이용해 줌인 / 줌아웃을 할 수 있습니다.

차트 설명서의 'AllowZooming' 및 'MouseWheelFunction' 속성을 검색합니다.

다음은 로그 척도의 모든 축이 일반 선형 축이 아닌 3D 산점도를 보여 줍니다.

X, Y 및 Z 격자선 레이블은 과학분야 옵션의 표기법으로 되어 있습니다.

이 차트는 선택적으로 아이소메트릭으로 차트를 표시합니다. 이 시점에서는, 후방 하단 그리드 사각형의 크기가 전면 하단 그리드 사각형의 크기와 동일하다는 점에 유의하십시오. 깊이는 데이터 위치와 크기를 왜곡하지 않으며, 심볼 사이즈는 영상 내에서 더 깊지만 비슷하게 나타납니다.

예제 코드 및 데모의 예제 404번을 보세요.

로그 스케일은 PeGrid.Configure.XAxisScaleControl, YAxisScaleControl, and ZAxisScaleControl 속성을 통해 설정됩니다.

다음 차트는 위에 있는 것과 마찬가지의 3D 산점도(스캐터 플랏 그래프)지만, 마우스 휠을 통해 줌인 된 것입니다.

이 빨간점의 데이터 좌표 텍스트 프롬프트와 함께 노란색 점 사이의 빨간색 솔리드 점을 주목하십시오. 이 스크린샷에는 마우스 화살표가 표시되지 않았지만 마우스는 이 빨간색 점 위에 있습니다. 이 차트는 마우스 아래 데이터 값의 히트 테스트 및 데이터 프롬프트를 제공합니다.

다음 차트는 데모의 예제 404번과 유사하지만 몇 가지 프로에센셜 3D 그래프 주석 기능을 더 보여 줍니다. GraphAnnotationPolyData(개발자가 폴리곤을 생성하기 위해 정점의 낮은 레벨 실제 위치를 제공할 수 있는 곳) 및 상위 레벨 그래프 주석 타입은 프로에센셜 속성 GraphAnnotationType을 통해 간단히 준비된 주석 기능으로 실린더, 원뿔, 3D 타원, 큐브, 2D 타원, 2D 사각형 등을 만들 수 있습니다.

다음 차트는 위에 있는 것과 마찬가지의 3D 산점도(스캐터 플랏 그래프)지만, 마우스 휠을 통해 줌인 된 것입니다.

보기(카메라 위치)는 회색 구체의 내부에서 바깥을 보고 있습니다. 또한, 마우스 화살표 위치를 통해 데이터 프롬프트, 데이터 좌표를 알려주는 Red Cube에 주목하십시오.

아래 차트는 예제 코드 및 데모의 예제 123번에서 가져온 것입니다.

왼쪽 상단 녹색 텍스트 Play(재생)를 확인합니다. 예제 프로젝트 또는 데모를 직접 다운로드하여 살펴볼 때 이 텍스트를 클릭하십시오. 노래가 재생되기 시작하고 수직선 주석이 실시간으로 재생 위치를 따라갑니다. 그럼 마우스 휠을 사용하여 확대하면 현재 재생 위치를 보다 자세히 볼 수 있습니다. 마우스 휠이 500-1000 포인트로 확대되는 것은 매우 매끄럽게 움직이며, 실시간 차트는 더 이상 데이터 이동이 오른쪽에서 왼쪽으로 하는 것을 감지하지 못하는 오실로스코프를 모방합니다. 오히려 실시간 차트는 각 프레임마다 완전히 다른 데이터를 보여줍니다.

이 차트는 이벤트 기반 커스텀 x축 포맷의 기능도 보여줍니다. x축이 렌더링되면 그리드 선 레이블 텍스트가 개발자 이벤트로 전송되어 개발자가 레이블 텍스트의 커스텀 표현을 삽입할 수 있습니다. 코드 몇 줄만 있으면 x축 형식을 커스텀할 수 있습니다.

아래 차트는 예제 코드 및 데모의 예제 130번에서 가져온 것입니다.

이 차트는 추가 x축과 y축을 보여 줍니다. 두 척도가 동일한 데이터를 나타낼 수 있는 간단한 기능입니다. (예: 섭씨 및 화씨)

아래 차트는 예제 코드 및 데모의 예제 129번에서 가져온 것입니다.

이 차트는 수직 방향인 y축 그리드 숫자들과 그리드 레이블 영역에 포함된 하위 집합의 범례를 보여 줍니다.

이러한 결합된 기능의 목표는 중복된 여러 축을 구현할 때 창 영역 실물을 보존하는 것입니다. 특히 차트 자체가 매우 작은 경우 한 개의 창에 이러한 차트가 20개 있을 수 있습니다.

아래 차트는 예제 코드와 데모의 132번입니다.

이 차트는 이벤트를 사용하여 y축 형식을 커스텀하는 방법을 보여 줍니다. 예를 들어, [400]이 존재할 y축이 표시되면 해당 위치에 [High Value]가 표시됩니다.

아래의 차트는 예제 코드와 데모의 409번과 401번에서 가져온 것입니다.

이러한 차트들은 3D 그래프 주석과 결합된 3D 색상 윤곽 및 GIS 기능을 보여 줍니다.

아래의 차트는 예제 코드와 데모의 301번의 것에서 가져온 것입니다.

이 차트는 파이 차트 기능을 보여 줍니다. 예제 프로젝트 및 데모를 실행할 때 차트를 마우스 오른쪽 버튼으로 클릭하고 [데이터 섀도우(Data Shadow)] 및 [그라디언트 스타일(Gradient Style)]을 선택하면 아래의 다양한 대체 차트가 제공됩니다.

프로에센셜에는 제로 슬라이스(또는 지정된 임계값 미만의 슬라이스)를 자동으로 *다른 슬라이스로 분류하고 제로, null 값 또는 작은 조각을 전문적인 깔끔한 방식으로 처리하는 기능이 내장되어 있습니다.

파이 차트에서 범례를 구분하는 범례 옵션 기능입니다.

아래 차트는 예제 코드 및 데모의 예제 200번에서 가져온 것입니다.

이 차트는 프로에센셜의 폴라 차트(Polar Chart)의 기능을 보여 줍니다. 예제 프로젝트와 데모를 실행할 때 폴라 차트를 확대하면 업계 최고의 폴라 차트 작성 방식을 확인할 수 있습니다. 폴라 그리드는 확대/축소 수준에 따라 구조가 지능적으로 변경됩니다.

아래 차트는 위와 동일하지만 더욱 확대되었습니다.

아래 차트에는 선택적으로 고밀도 폴라 차트 그리드가 표시됩니다.

아래 차트는 예제 코드 및 데모의 예제 203번에서 가져온 것입니다.

이 차트는 프로에센셜 스미스 차트(Smith Chart) 기능을 보여 줍니다. 예제 프로젝트와 데모를 실행할 때 스미스 차트를 확대해보시면 업계 최고의 스미스 차트 제작 방식을 확인할 수 있습니다. 스미스 차트 그리드는 확대/축소 수준에 따라 구조가 지능적으로 변경됩니다.

어드미턴스 차트(Admittance Chart)에 대해서도 유사한 수준으로 지원하고 있습니다.

아래 차트는 위와 동일하지만 확대되었습니다.

아래 차트는 예제 코드 및 데모의 예제 407번에서 가져온 것입니다.

이 차트는 프로에센셜 3D 폭포 차트(Waterfall Chart) 기능을 보여 줍니다. 예제 프로젝트와 데모를 실행할 때 Point를 선택하기 위해 Plotting Method 메뉴를 사용하여 차트를 마우스 우클릭하면 이러한 보기가 적용됩니다.

아래 차트는 예제 코드 및 데모의 예제 402번에서 가져온 것입니다.

이 차트는 y의 값에 대한 색상 사이에 랜덤 비선형 관계를 갖는 프로에센셜 3D 표면 윤곽선(Surface Contours)을 보여 줍니다.

범례 내에서 노란색 윤곽선 색상 부분이 더 커진다는 점에 유의하세요.

아래 차트는 예제 코드 및 데모의 예제 406번과 유사합니다.

이 차트는 프로에센셜 3D 폴리곤 데이터 인터페이스를 보여 줍니다.

이 이미지는 4D - 3D 렌더링 등고선 차트 작성 방법을 사용할 수 있는 4차원 데이터 세트인 WDATA를 제공하여 차트를 확장합니다.

아래 차트는 예제 코드 및 데모의 예제 403번과 유사합니다.

이 차트는 원하는 4차원 방식으로 차트를 사용자 정의하기 위해 포인트칼라 속성과 결합된 3D 와이어프레임 그래프 작성 방법을 보여 줍니다.

아래 차트는 예제 코드 및 데모의 예제 139번입니다.

이 차트는 Direct3D 및 DirectX 하드웨어 가속을 통해 구현된 로그 선형 스케일링을 포함한 2D 열지도(Heatmap), 2D 등고선(Contour), 스펙트로그램(Spectrogram)을 보여줍니다.

아래 차트는 보다 자세한 내용을 보여주기 위해 확대된 위의 차트입니다.

아래 차트는 예제 코드 및 데모의 예제 121번입니다.

이 차트는 등각선 레이블과 동시에 2D 등고선을 그래프로 보여줍니다.

아래 차트는 예제 코드 및 데모의 예제 122번입니다.

이 차트는 깊이를 시각화하는 데 도움이 되는 그림자가 옵션인 2D 등고선 차트(Contour plot)를 보여줍니다.

아래는 쉐도우를 없앤 위와 동일한 차트입니다.

예제 프로젝트 및 데모를 실행할 때 '플로팅 메소드' 메뉴를 사용하여 '색상 윤곽선'을 선택하면 차트에 마우스를 우클릭하면 이 보기가 표시됩니다.

2D 윤곽선 그림자 기능은 데이터에 깊이감을 크게 증가시키지만, 그림자가 없는 보기 역시 다른 데이터나 주석에 더 많은 주의를 기울여야 하는 경우에 유용합니다.

아래 차트는 위와 동일하지만 확대/축소되어 더 자세한 내용을 보여줍니다.

아래 차트는 예제 코드 및 데모의 예제 400번입니다.

이 차트는 마우스 아래 데이터 조각에 주석을 다는 실시간 2D 다각형 주석을 가진 3D 와이어프레임 그래프를 보여줍니다.

예제 프로젝트와 데모를 실행할 때 마우스를 차트의 표면 위로 이동하면 실시간 2D 다각형 조각이 표시됩니다. 코드는 'MouseMove' 이벤트 예제 코드에서 찾을 수 있습니다. 또한 0~9 키를 누르면 주석 0~9의 카메라 뷰를 대상으로 차트가 자동으로 회전합니다. 그런 다음 마우스 휠을 회전하면 주석을 보는 동안 확대 및 축소됩니다. 차트가 회전할 때는 주석 레이블들이 서로 비킨다는 사실을 유의하세요.

대부분의 고객의 경우 이 코드는 1번 양식(Form1)에 있으며, 400번을 검색하면 관련 예제 코드를 더 빨리 찾을 수 있습니다. 예제 프로젝트 내의 예와 관련된 코드를 찾으려면 해당되는 번호를 사용하십시오.

아래 차트는 예제 코드 및 데모의 예제 405번과 유사합니다.

이 차트는 마우스 아래에 표시되는 데이터가 포함된 3D 막대 그래프를 보여 줍니다(흰색 막대 및 데이터 값 1696 참조). 이 차트는 데이터 위에 배치된 큐브 형태의 그래프 주석도 보여 줍니다.

아래 차트는 예제 코드 및 데모의 예제 105번과 유사합니다.

이 차트는 Y축 및 우측 Y축, X축 및 상단 X축과 관련하여 표시된 데이터가 있는 2D 선도표(라인 차트)를 보여 줍니다.

이 예제의 목적은 커서모드와 동적 툴팁 데이터 좌표 프롬프트 기능을 시연하는 것입니다.

아래 차트는 예제 코드 및 데모의 예제 110번과 유사합니다.

이 차트는 로그-로그 스케일의 2D 산점도(스캐터 차트)를 보여줍니다.

이 예제의 목적은 최종 사용자가 로그 스케일을 확대할 때의 로그 스케일과, 또 이가 얼마나 잘 작동하는지 시연하는 것입니다.

이 예제의 또 다른 목적은 최종 사용자 툴링 기능인 그래프 주석의 빠른 구현을 시연하는 것입니다. 이 기능은 마우스를 드래그하는 동안 일시적으로 그래프를 그리기 위해 마우스-다운, 마우스-이동 및 마우스-업 이벤트에 코드를 배치하여 구현됩니다. 예제 프로젝트와 데모를 실행할 때 마우스를 좌클릭하고 드래그하면서 마우스를 누른 채 데이터 단위 너비에 x 및 y 방향으로 주석을 다는 텍스트가 있는 임시 원형 직사각형을 그립니다.

아래 차트는 위와 동일하지만 대체 로그 스케일 구조를 표시하도록 확대되었습니다.

아래 차트는 예제 코드 및 데모의 예제 136번과 유사합니다.

이 차트는 비교 선이 있는 면적 그래프를 보여 줍니다.

채워진 면적의 색상은 계열의 넓이가 더 큰 시리즈를 교체할 때 반전됩니다.

아래 차트는 예제 코드 및 데모의 예제 016번과 유사합니다.

이 예제의 목적은 일시 데이터를 처리하는 방법과 최종 사용자가 차트를 다양한 범위로 확대할 때 x축이 얼마나 잘 작동하는지를 시연하는 것입니다. 팝업 메뉴를 사용하여 x축 레이블 방향을 변경하고 차트의 크기를 조정하는 기능은 줌을 함에 따라 일부를 크게 볼 수 있고, 전반적인 렌더링의 우수성의 입증합니다.

아래 차트는 예제 코드 및 데모의 예제 015번과 유사합니다.

이 예제의 목적은 2D 차트 내에서 기본 그래프 주석을 작성하는 방법을 시연하는 것입니다. 이 예제의 코드를 연구할 때 우측에 Y 축이 있으며 우측 Y 축과 관련된 주석을 작성하는 방법도 나와 있습니다.

예제 015번, 007, 014, 000, 012, 100, 103번은 프로에센셜 공부를 시작하는 데 가장 유용합니다.

아래 차트는 예제 코드 및 데모의 예제 015와 유사합니다.

이 예제의 목적은 버블 차트를 그리는 방법을 시연하는 것입니다. 버블 차트 제작시, PeData.X, PeData.Y와 함께 PeData.Z를 경험하실 겁니다.

아래 차트는 예제 코드 및 데모의 예제 124번과 유사합니다.

이 예제의 목적은 차트를 초기 디폴트 보기로 선택된 프로그래밍된 줌(수평 범위, 최소 및 최대) 과 함께 표시하는 방법을 시연하는 것입니다. 가로 스크롤바를 사용하여 나머지 데이터 범위를 이동할 수 있습니다.

아래 차트는 예제 코드 및 데모의 예제 034번과 유사합니다.

이 예제의 목적은 다음과 같은 것들을 시연하는 데 있습니다...

• 수평 누적 막대 그래프 그리기
• 테이블 주석을 작성한 다음 이를 이용하여 최종 사용자가 계열의 숨김 여부를 선택하도록 하기
• 문단을 보여주기 위한 테이블 주석을 작성하기

아래 차트는 예제 코드 및 데모의 예제 003번과 유사합니다.

이 예제는 매우 기본적인 예로서, 좌우 Y 축에 대해 서로 다른 표시 방법으로 시리즈를 표시하는 방법을 보여 줍니다. 스타일.

이 예에서는 RYAxisComparisonSubsets=2 로 속성을 설정하기만 하면 되는데, 이 속성은 2개의 하위 집합 그룹을 구성하고 2는 마지막 그룹의 크기를 정의합니다.

속성 'PlottingMethod'는 첫 번째 그룹의 플로팅 스타일을 제어합니다.

속성 'PlottingMethodII'는 두 번째 그룹의 플로팅 스타일을 제어합니다.

두 가지 플로팅 스타일을 보여주는 이 선택적 접근 방식을 통해 최종 사용자는 차트의 시리즈가 기본으로 제공되는 사용자 지정 다이얼로그를 통해 플로팅 스타일을 수정할 경우 논리 그룹으로 그룹화된다는 것을 분명히 이해할 수 있습니다.

여러 가지 플로팅 스타일을 보여주는 몇 가지 방법이 있습니다. 'PlottingMethods'는 각 시리즈별로 플로팅 스타일을 제어할 수 있습니다. 'PlottingMethods'의 사용 예제는 데모 예제 022번을을 참고하십시오.

아래 차트는 예제 코드 및 데모의 예제 025번과 유사합니다.

이 예제에서는 플로팅 스택 바 차트를 만드는 방법을 보여 줍니다. PeData.Z는 스택 바들의 간격을 제어합니다.

아래 차트는 예제 코드 및 데모의 예제 410번입니다.

이 예제에서는 실시간으로 업데이트된 3D 표면도를 만드는 방법을 보여줍니다. 구현 방법에 대한 자세한 내용은 코드 타이머 이벤트 예제(410번 검색)를 참고하세요.

아래 차트는 예제 코드 및 데모의 예제 408번입니다.