Home 소개       다운로드       온라인 설명서      주식/코인 차트    Q & A     Blog    

히포차트 4.3 - 스크롤 차트 활용 + 구간 표시







히포차트 4.3 에서 스크롤 차트를 가장 효율적으로 구현하는 방법에 대해 알아봅니다.

히포차트에서는 sHippochart 컨트롤을 별도로 제공하고 있지만 보다 많은 활용성과 실시간 차팅일 위해서는 아래의 코드를 이용하시기 바랍니다.

HScrollbar 컨트롤을 이용해서 히포차트를 스크롤 하고 전체 차트에서 어디 구간을 나타내는지를 표시하는 예제 소스입니다.

이 코드는 별도 샘플 프로젝트 다운로드를 제공합니다




스크롤 응용하기  히포차트4 - 줌, 스크롤 기능, 마우스 더블클릭  히포차트 4.1 - 스크롤 차트 X축 아이템 간격 조정 속성  히포차트 4.3 - 스크롤 차트 활용 + 구간 표시  히포차트 4.3 - 실시간 차트 + 스크롤 기능 응용하기  


C#
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Hippo;

namespace WindowsApplication1
{
/********************************************************************************************************************
*
* 히포차트 4.3 스크롤 차트 응용 샘플
*
* - HScrollbar 컨트롤을 이용해서 효율적인 스크롤을 운영하는 방법을 안내합니다.
* - 히포차트에서 제공하는 sHippochart 에서도 구현이 가능하지만 활용성과 실시간 차팅을 위해서 더 나은 코드를 제공합니다.
* - 본 샘플에서는 아래와 같은 내용을 다룹니다.
*
* ==>
* HScrollbar 스크롤 이벤트를 통해 효율적인 스크롤 이용하기
* X축이 문자형일 경우 틱 추가하기
* 추가된 틱을 통해 전체 차트의 구간 표시하기
*
*******************************************************************************************************************/
public partial class Form1 : Form
{
// 전체 데이터
SeriesList sListALL;

// 스크롤로 보여줄 데이터
SeriesList sList;

SeriesItem[] items;

int allcount = 100;

// 한번에 차트에 보여줄 데이터수
int viewcount = 10;

public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)
{
this.hScrollBar1.Minimum = 0;
this.hScrollBar1.Maximum = allcount;

sList = new SeriesList();
sList.SeriesCollection.Add(new Series());
sList.AxisFactor.YAxis.Direction = AxisDirection.Right;

sListALL = new SeriesList();
sListALL.SeriesCollection.Add(new Series());
sListALL.AxisFactor.YAxis.Direction = AxisDirection.Right;

InitDataSelect();

// 전체 차트에 구간을 표시하기 위한 틱 표시
AxisTick tk1 = new AxisTick(new PointF(
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.X + this.hHippoChart2.SeriesListDictionary[0].AxisFactor.XAxis.UnitPixel * 90,
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.Y));
tk1.IsShowGridLine = true;
tk1.GridLine.LineColor = Color.Red;
tk1.GridLine.LineWidth = 1;
sListALL.AxisFactor.XAxis.ExtraTicks.Add(tk1);

AxisTick tk2 = new AxisTick(new PointF(
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.X + this.hHippoChart2.SeriesListDictionary[0].AxisFactor.XAxis.UnitPixel * 100,
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.Y));
tk2.IsShowGridLine = true;
tk2.GridLine.LineColor = Color.Red;
tk2.GridLine.LineWidth = 1;
sListALL.AxisFactor.XAxis.ExtraTicks.Add(tk2);

this.Draw();
}

///
/// 초기 데이터를 조회합니다.
///

private void InitDataSelect()
{
items = new SeriesItem[allcount];

Random r = new Random();

// allcount0개의 초기 데이터를 불러 온다고 가정
for(int i = 0; i < allcount; i++)
{
SeriesItem item = new SeriesItem(r.Next(999));
item.Name = i.ToString();

items.SetValue(item, i);
}

// 만들어진 시리즈아이템을 시리즈로 구성하여 차트를 그립니다.
// 가장 뒤에 allcount개를 먼저 그린다.
for(int i = allcount - 1 - viewcount; i < allcount; i++)
{
sList.SeriesCollection[0].items.Add(items[i]);
}

this.hHippoChart1.SeriesListDictionary.Add(sList);

Draw();


// 비교를 위해 전체 데이터를 그린다.
foreach(SeriesItem item in items)
{
sListALL.SeriesCollection[0].items.Add(item);
}

this.hHippoChart2.SeriesListDictionary.Add(sListALL);
this.hHippoChart2.DrawChart();
}

///
/// 차트를 그립니다.
/// (각종 설정들은 여기서)
///

private void Draw()
{
this.hHippoChart1.DrawChart();
this.hHippoChart2.DrawChart();
}

///
/// 스크롤이 이루어 질때 이벤트
///

///
///
private void hScrollBar1_Scroll(object sender, ScrollEventArgs e)
{
try
{
sList.SeriesCollection[0].items.Clear();

int newIDX = allcount - e.NewValue - 10;

for(int i = newIDX; i < newIDX + 10; i++)
{
sList.SeriesCollection[0].items.Add(items[i]);
}

sListALL.AxisFactor.XAxis.ExtraTicks[0].TickPoint = new PointF(
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.X + this.hHippoChart2.SeriesListDictionary[0].AxisFactor.XAxis.UnitPixel * (newIDX),
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.Y);
sListALL.AxisFactor.XAxis.ExtraTicks[1].TickPoint = new PointF(
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.X + this.hHippoChart2.SeriesListDictionary[0].AxisFactor.XAxis.UnitPixel * (newIDX + 10),
this.hHippoChart2.SeriesListDictionary[0].AxisFactor.Zero.Y);

Draw();
}
catch { }
}
}
}


VB
 

Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms
Imports Hippo

Namespace WindowsApplication1
`*******************************************************************************************************************
` *
` * 히포차트 4.3 스크롤 차트 응용 샘플
` *
` * - HScrollbar 컨트롤을 이용해서 효율적인 스크롤을 운영하는 방법을 안내합니다.
` * - 히포차트에서 제공하는 sHippochart 에서도 구현이 가능하지만 활용성과 실시간 차팅을 위해서 더 나은 코드를 제공합니다.
` * - 본 샘플에서는 아래와 같은 내용을 다룹니다.
` *
` * ==>
` * HScrollbar 스크롤 이벤트를 통해 효율적인 스크롤 이용하기
` * X축이 문자형일 경우 틱 추가하기
` * 추가된 틱을 통해 전체 차트의 구간 표시하기
` *
` ******************************************************************************************************************

Public Partial Class Form1
Inherits Form
` 전체 데이터
Private sListALL As SeriesList

` 스크롤로 보여줄 데이터
Private sList As SeriesList

Private items As SeriesItem()

Private allcount As Integer = 100

` 한번에 차트에 보여줄 데이터수
Private viewcount As Integer = 10

Public Sub New()
InitializeComponent()
End Sub

Private Sub Form1_Load(sender As Object, e As EventArgs)
Me.hScrollBar1.Minimum = 0
Me.hScrollBar1.Maximum = allcount

sList = New SeriesList()
sList.SeriesCollection.Add(New Series())
sList.AxisFactor.YAxis.Direction = AxisDirection.Right

sListALL = New SeriesList()
sListALL.SeriesCollection.Add(New Series())
sListALL.AxisFactor.YAxis.Direction = AxisDirection.Right

InitDataSelect()

` 전체 차트에 구간을 표시하기 위한 틱 표시
Dim tk1 As New. AxisTick(New PointF(Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.X + Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.XAxis.UnitPixel * 90, Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.Y))
tk1.IsShowGridLine = True
tk1.GridLine.LineColor = Color.Red
tk1.GridLine.LineWidth = 1
sListALL.AxisFactor.XAxis.ExtraTicks.Add(tk1)

Dim tk2 As New. AxisTick(New PointF(Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.X + Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.XAxis.UnitPixel * 100, Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.Y))
tk2.IsShowGridLine = True
tk2.GridLine.LineColor = Color.Red
tk2.GridLine.LineWidth = 1
sListALL.AxisFactor.XAxis.ExtraTicks.Add(tk2)

Me.Draw()
End Sub

```
``` 초기 데이터를 조회합니다.
```

Private Sub InitDataSelect()
items = New SeriesItem(allcount - 1) {}

Dim r As New. Random()

` allcount0개의 초기 데이터를 불러 온다고 가정
For i As Integer = 0 To allcount - 1
Dim item As New. SeriesItem(r.[Next](999))
item.Name = i.ToString()

items.SetValue(item, i)
Next

` 만들어진 시리즈아이템을 시리즈로 구성하여 차트를 그립니다.
` 가장 뒤에 allcount개를 먼저 그린다.
For i As Integer = allcount - 1 - viewcount To allcount - 1
sList.SeriesCollection(0).items.Add(items(i))
Next

Me.hHippoChart1.SeriesListDictionary.Add(sList)

Draw()


` 비교를 위해 전체 데이터를 그린다.
For Each item As SeriesItem In items
sListALL.SeriesCollection(0).items.Add(item)
Next

Me.hHippoChart2.SeriesListDictionary.Add(sListALL)
Me.hHippoChart2.DrawChart()
End Sub

```
``` 차트를 그립니다.
``` (각종 설정들은 여기서)
```

Private Sub Draw()
Me.hHippoChart1.DrawChart()
Me.hHippoChart2.DrawChart()
End Sub

```
``` 스크롤이 이루어 질때 이벤트
```

```
```
Private Sub hScrollBar1_Scroll(sender As Object, e As ScrollEventArgs)
Try
sList.SeriesCollection(0).items.Clear()

Dim newIDX As Integer = allcount - e.NewValue - 10

For i As Integer = newIDX To newIDX + 9
sList.SeriesCollection(0).items.Add(items(i))
Next

sListALL.AxisFactor.XAxis.ExtraTicks(0).TickPoint = New PointF(Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.X + Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.XAxis.UnitPixel * (newIDX), Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.Y)
sListALL.AxisFactor.XAxis.ExtraTicks(1).TickPoint = New PointF(Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.X + Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.XAxis.UnitPixel * (newIDX + 10), Me.hHippoChart2.SeriesListDictionary(0).AxisFactor.Zero.Y)

Draw()
Catch
End Try
End Sub
End Class
End Namespace



※ 히포차트 샘플 코드는 버전별로 상이한 결과를 나타낼 수 있습니다.

이 코드 관련 문의 사항은 페이스북 리플을 달아주시거나 아래 이메일로 이 페이지 주소와 함께 문의주세요.

helpdesk@hippochart.com





Copyright © 2009-2018 HippoChart. Inc.  All Rights Reserved.