트레이닝 센터

데이터 분석 & 시각화

상호 작용을 위한 C1Chart 차트를 만들기

C1Chart를 이용해 조정 가능한 그래프를 만들 수 있습니다. 최종사용자가 직접 디바이스를 통해 C1Chart를 사용할 수 있습니다. 작성 요소를 이용해 최대 값이나 최소 값과 같이 마우스를 올려놓거나 클릭했을 때 툴팁에 표시되는 내용을 설정 수 있습니다. 빅 데이터나 실시간 데이터의 경우 종종 그래프로 표시할 필요가 있습니다. 끊임 없이 업데이트되는 데이터를 추가하고 스크롤이나 줌을 통해 일부 또는 일시적인 경향에 대한 정보를 얻을 수 있습니다. 3D 그래프의 C1Chart3D는 마우스 드래그를 지원합니다. 마우스를 사용하기만 하면 X, Y, Z 세 축을 임의의 방향으로 반전시킬 수 있으며 최종 사용자의 요구를 만족시킬 수 있습니다.

본문에서는 C1Chart 그래프 작성 방법과 강화된 조정기능에 대해 설명합니다. (줌, 역방향, X축 반전, 눈금)


1. C1Chart그래프 만들기

먼저, C1Chart의 조정 특성을 컨트롤합니다. 각각 마우스 반전, 눈금, 반전 및 줌을 실행합니다. 구체적인 코드는 다음과 같습니다. :

// Enable interaction
            c1Chart1.Interaction.Enabled = true;
            c1Chart1.Interaction.Actions["Zoom"].Modifier = Keys.None;
            c1Chart1.Interaction.Actions["Scale"].Modifier = Keys.Control;
            c1Chart1.Interaction.Actions["Translate"].Modifier = Keys.Shift;
            c1Chart1.Interaction.Actions["Rotate"].Modifier = Keys.Alt;
            c1Chart1.Interaction.Appearance = InteractionAppearance.FillSelectionArea;

그 다음은 C1Chart의 서열을 만듭니다. 본문의 Demo에서는 네 개의 Series를 만들어 보았습니다. 각각 전도율, ph, 온도, 압력입니다. 이 네 개의 Series는 각각 색상으로 구별하여 표시합니다. 구체적인 코드는 다음과 같습니다. :


// Create chart series
            c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();
            cdsTemp = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
            cdsPress = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
            cdsCond = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
            cdsPh = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();

            cdsTemp.SymbolStyle.Shape = SymbolShapeEnum.None;
            cdsTemp.LineStyle.Color = Color.FromArgb(150, 32, 132);
            cdsTemp.LineStyle.Thickness = 2;
            cdsPress.SymbolStyle.Shape = SymbolShapeEnum.None;
            cdsPress.LineStyle.Color = Color.FromArgb(42, 2, 153);
            cdsPress.LineStyle.Thickness = 2;
            cdsCond.SymbolStyle.Shape = SymbolShapeEnum.None;
            cdsCond.LineStyle.Color = Color.FromArgb(0, 114, 160);
            cdsCond.LineStyle.Thickness = 2;
            cdsPh.SymbolStyle.Shape = SymbolShapeEnum.None;
            cdsPh.LineStyle.Color = Color.FromArgb(100, 126, 52);
            cdsPh.LineStyle.Thickness = 2;

마지막으로 C1Chart의 축과 스크롤 바를 만듭니다. 구체적인 코드는 다음과 같습니다. :

// Setup chart axes and scrollbar
            c1Chart1.ChartArea.AxisX.ScrollBar.Scale = 0.1;
            c1Chart1.ChartArea.AxisY.ScrollBar.Scale = 1.0;
            c1Chart1.ChartArea.AxisX.ScrollBar.Alignment = StringAlignment.Near;
            c1Chart1.ChartArea.AxisY.ScrollBar.Alignment = StringAlignment.Near;
            c1Chart1.ChartArea.AxisX.ScrollBar.Appearance = ScrollBarAppearanceEnum.XP;
            c1Chart1.ChartArea.AxisY.ScrollBar.Appearance = ScrollBarAppearanceEnum.XP;
            c1Chart1.ChartArea.AxisX.ScrollBar.Visible = true;
            c1Chart1.ChartArea.AxisY.ScrollBar.Visible = true;
            c1Chart1.ChartArea.AxisY.ScrollBar.Max = 80;
            c1Chart1.ChartArea.AxisY.ScrollBar.Min = 20;
            c1Chart1.ChartArea.AxisX.ScrollBar.AxisScroll += new AxisScrollEventHandler(ScrollBar_AxisScroll);

2. 초기화C1Chart,데이터 로딩

본문에 첨부된 Demo에서 C1XLBook의 Load방법을 통해 excel파일에 데이터를 로딩합니다. excel파일은 C1에 필요한 네 개의 Series (전도율, ph, 온도, 압력)의 데이터를 포함합니다. 또한 이 네 개의 Series는 실행 시 활동적으로 증가하거나 감소합니다. 즉, 사용자가 어떤 Series를 표시하는 그래프를 선택할 수 있습니다. 구체적인 것은 첨부한 Demo의 코드를 참조하실 수 있습니다.


3. C1Chart조정

사용자가 간단하게 C1의 조정 기능을 실현할 수 있습니다. (반전, 눈금, 역방향과 줌)
줌: 빅 데이터나 실시간 데이터의 경우 종종 그래프로 표시할 필요가 있습니다. 끊임 없이 업데이트되는 데이터를 추가하고 스크롤이나 줌을 통해 일부 또는 일시적인 경향에 대한 정보를 얻을 수 있습니다.
확대 참고코드:

// Zoom out
c1Chart1.ChartArea.AxisX.ScrollBar.Scale = c1Chart1.ChartArea.AxisX.ScrollBar.Scale / _zoomScale;
c1Chart1.ChartArea.AxisY.ScrollBar.Scale = c1Chart1.ChartArea.AxisY.ScrollBar.Scale / _zoomScale;

X축 반전: 본문 Demo에서 사용자가 X축으로 반전되는 CheckBox를 클릭하면 C1Chart가 이를 즉시 실행할 수 있습니다. 코드도 매우 간단합니다. 한 문장만 있으면 됩니다. 다음과 같습니다.


c1Chart1.ChartArea.AxisX.Reversed = chkAxisXReversed.Checked;

역방향: 사용자는 C1Chart의 그래프에 X축과 Y축의 역방향을 적용할 수 있습니다. Bool 유형의 C1Chart.ChartArea.Inverted 속성을 설정한 후, 다시 그래프 요소의 양식을 작성합니다. 구체적인 코드는 첨부한 Demo을 참조할 수 있습니다.


이뿐만 아니라 실행 시 데이터소스를 변경할 수 있어 필요한 모든 그래프를 표시할 수 있습니다. 아래 그림이 그 예시입니다.



본문 Demo의 소스코드는 다음과 같습니다. :


샘플 다운로드



한국 그레이프시티 공식카페에서 기술지원을 받으실 수 있습니다.
이메일을 통해서도 기술지원을 받으실 수 있습니다.