재무 차트

wijmo.chart.finance.FinancialChart 컨트롤은 다양한 차트 유형을 지원하여 사용자 지정을 허용합니다. 유형을 변경할 chartType 속성을 설정해보시기 바랍니다.

다음과 같은 기본 차트 유형이 지원됩니다(FlexChart 및 FinancialChart 공통).

  • Column
  • Scatter
  • Line
  • LineSymbols
  • Area
  • Candlestick
  • HighLowOpenClose

다음과 같은 고급 재무 차트 유형도 지원됩니다.

  • HeikinAshi
  • LineBreak
  • Renko
  • Kagi
  • ColumnVolume
  • EquiVolume
  • CandleVolume
  • ArmsCandleVolume
  • PointAndFigure

FinancialChart 차트 유형을 설정하는 방법:

import * as chart from '@grapecity/wijmo.chart';
import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'HeikinAshi',
    series: [
        { binding: 'high,low,open,close' }
    ]
});

Heikin-Ashi

Heikin-Ashi 차트는 촛대의 노이즈를 제거하고 움직이는 평균과 매우 비슷하게 작동하도록 설계된 일본의 촛대 차트를 변형한 것입니다. 이러한 차트는 추세, 잠재적 역전점 및 기타 기술 분석 패턴을 식별하는 데 사용할 수 있습니다.

Heikin-Ashi 차트의 모양은 촛대 차트와 동일하지만 기본 가격 값은 다음 공식을 기반으로 계산됩니다.

  • haHigh Max(high[0], haOpen[0], haClose[0])
  • haLow Min(low[0], haOpen[0], haClose[0])
  • haOpen Avg(haOpen[-1], haClose[-1])
  • haClose Avg(high[0], low[0], open[0], close[0])

"-1"은 이전 주기를 나타내고, "0"은 현재 주기를 나타냅니다.

이러한 차트는 다른 series 객체와 결합할 수 없습니다. 이 차트 유형의 데이터는 FinancialChart 또는 FinancialSeries 바인딩 속성을 사용하여 다음 형식으로 쉼표로 구분된 값으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty"입니다.

Line Break

Line Break또는 Three Line Break차트는 수직 상자 또는 라인을 사용하여 자산 또는 시장의 가격 변동을 나타냅니다. 이동은 상자 색상과 스타일로 표시되며, 이전 상자의 추세와 이어지는 이동은 유사한 색상으로 표시되는 반면, 반대 추세 이동은 다른 색상 및/또는 스타일로 표시됩니다. 반대 추세는 그 값이newLineBreaks 옵션에 의해 결정되는 이전 n개의 박스 또는 라인 수의 극단값을 초과할 경우에만 그려집니다.

이 차트 유형의 데이터는 FinancialChart 또는 FinancialSeries 바인딩 속성을 사용하여 다음 형식으로 쉼표로 구분된 값으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty"입니다.

Line Breaks의 숫자 설정

options.lineBreak.newLineBreaks는 Line Break 차트에서 새 상자를 그리기 전에 비교해야 하는 이전 상자 수를 설정합니다. 기본값은 3입니다.

예제:

myFinancialChart.options = {
  lineBreak: { newLineBreaks: 3 }
}

Line Break 차트 스타일링

Line Break 차트 유형은 altStyle을 사용하여 상승 값을 채웁니다. 공통 스타일 속성(모든 차트 유형과 공유)이 하강 값을 채웁니다.

예제:

myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'rgba(136, 189, 230, 0.701961)'
};


myFinancialChart.series[0].altStyle = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'transparent'
};
Line Break Chart

Renko

Renko 차트는 가격 변동을 도표화하기 위해 균일한 크기의 벽돌을 사용한다. 가격이 새 벽돌을 그리는 데 필요한 사전 설정된 상자 크기 옵션보다 크거나 작은 값으로 이동하면 다음 열에 새 벽돌을 그립니다. 상자 색상과 방향의 변화는 추세 반전을 의미합니다.

이 차트 유형의 데이터는 FinancialChart 또는 FinancialSeries 바인딩 속성을 사용하여 다음 형식으로 쉼표로 구분된 값으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty"입니다.

Renko 옵션

Renko 차트 옵션들은 다음과 같습니다.

  • renko.fields: Renko 차트에 사용되는 DataFields 를 지정합니다. 기본값은 DataFields.Close 입니다.
  • renko.rangeMode: Renko 차트의 RangeMode 를 지정합니다. 기본값은 RangeMode.Fixed입니다. 다른 옵션으로는 ATR과 Percentage이 있습니다.
  • renko.boxSize: Renko 차트의 상자 크기를 지정합니다. 기본값은 14입니다.

예제:

myFinancialChart.options = {
  renko: {
     fields: wijmo.chart.finance.DataFields.Close,
     rangeMode: wijmo.chart.finance.RangeMode.Fixed,
     boxSize: 14
  }
}

Renko 차트 스타일링

렌코 차트 유형은 altStyle을 사용하여 상승 값을 채웁니다. 공통 스타일 속성(모든 차트 유형과 공유)이 하강 값을 채웁니다.

예제:

myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'rgba(136, 189, 230, 0.701961)'
};


myFinancialChart.series[0].altStyle = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'transparent'
};

Kagi

Kagi 차트는 연결된 수직선 시퀀스를 사용하여 공급 및 수요 추세를 표시합니다. 가격 움직임에 따라 선의 굵기와 방향이 달라집니다. 종가가 이전 Kagi 선 방향으로 가면 그 Kagi 선은 연장된다. 단, 종가가 사전 설정된 역전 금액만큼 역전되면 반대 방향의 다음 열에 새로운 Kagi 선이 도표화된다. 얇은 선은 이전의 낮은 가격(공급)을 깨는 것을 나타내고 굵은 선은 이전의 높은 가격(수요)을 깨는 것을 나타냅니다.

이 차트 유형의 데이터는 FinancialChart 또는 FinancialSeries 바인딩 속성을 사용하여 다음 형식으로 쉼표로 구분된 값으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty"입니다.

Kagi 옵션

Kagi 차트 옵션은 다음과 같습니다.

  • kagi.fields: Kagi 차트에 사용되는DataFields 를 지정합니다. 기본값은 DataFields.Close입니다.
  • kagi.rangeMode: Kagi 차트의 RangeMode 를 지정합니다. 기본값은 RangeMode.Fixed 입니다. 기타 옵션에는 ATR 및 Percentage이 포함됩니다..
  • kagi.reversalAmount: Kagi 차트의 반전 금액을 지정합니다. 기본값은 14입니다.

예제:

myFinancialChart.options = {
  kagi: {
     fields: wijmo.chart.finance.DataFields.Close,
     rangeMode: wijmo.chart.finance.RangeMode.Fixed,
     reversalAmount: 14
  }
}

Kagi 차트 스타일링

Kagi 차트 유형은 altStyle을 사용하여 ATR 범위 모드의 상승 값을 스타일링합니다. 공통 스타일 속성(모든 차트 유형과 공유)은 하강 값을 스타일링합니다. Kagi는 꺽은선형 차트이므로 stroke를 설정해야 합니다.

예제:

myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)'
};


myFinancialChart.series[0].altStyle = {
    stroke: 'red'
};

ColumnVolume

ColumnVolume charts are similar to Column charts, except that they accept a second value, volume, which dictates the width of each bar.

The data for this chart type can be defined using the binding property as a comma separated value in the following format: "yProperty, volumeProperty". Only one set of volume data is currently supported per FinancialChart.

예제:

import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'ColumnVolume',
    series: [
        { binding: 'close,volume' }
    ]
});

EquiVolume

EquiVolume 차트는 촛대 차트와 유사하지만 높은 값과 낮은 값만 표시합니다. 또한 각 막대의 너비는 다섯 번째 값인 볼륨에 의해 결정됩니다.

이 차트 유형의 데이터는 바인딩 속성을 쉼표로 구분된 값으로 사용하여 다음 형식으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty, volumeProperty"입니다. 현재 FinancialChart 당 하나의 볼륨 데이터 세트만 지원됩니다. EquiVolumn 차트 유형은 altStyle을 사용하여 상승 값을 채웁니다.

예제:

import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'EquiVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});

CandleVolume

candleVolume 차트는 각 막대의 너비가 다섯 번째 값인 볼륨에 의해 결정된다는 점을 제외하고는 표준 캔들스틱 차트와 동일합니다.

이 차트 유형의 데이터는 바인딩 속성을 쉼표로 구분된 값으로 사용하여 다음 형식으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty, volumeProperty"입니다. CandleVolumn 차트 유형은 altStyle을 사용하여 상승 값을 채웁니다.

예제:

import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'CandleVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});

Arms CandleVolume

Richard Arms에 의해 생성된 Arms CandleVolume 차트는 EquiVolume 차트와 CandleVolume 차트의 조합입니다.

이 차트 유형의 데이터는 바인딩 속성을 쉼표로 구분된 값으로 사용하여 다음 형식으로 정의할 수 있습니다. "highProperty, lowProperty, openProperty, closeProperty, volumeProperty"입니다. ArmsCandleVolumn 차트 유형은 altStyle을 사용하여 상승 값을 채웁니다.

예제:

import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'ArmsCandleVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});

Point & Figure

Point 과 Figure 차트는 필터링된 가격 이동을 나타내는 X와 O의 열로 구성됩니다. X-열은 가격 상승을 나타내고 O-열은 가격 하락을 나타냅니다.

이 차트 유형의 데이터는 바인딩 속성을 쉼표로 구분된 값으로 사용하여 다음 형식으로 정의할 수 있습니다. "highProperty, lowProperty, closeProperty"입니다. Point 과 Figure 차트 유형은 altStyle을 사용하여 대체 값을 색칠합니다.

예제:

import * as fChart from '@grapecity/wijmo.chart.finance';


var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'PointAndFigure',
    series: [
        { binding: 'high,low,close' }
    ],
    style: {
        stroke: 'black'
    },
    altStyle: {
        stroke: 'red'
    }
});

Point & Figure 옵션

Point와 Figure 차트 옵션은 다음과 같습니다.

  • pointAndFigure.fields: point 와 figure 차트에 사용되는 DataFields 를 지정합니다. 기본값은 DataFields.Close입니다.
  • pointAndFigure.reversal: Point와 Figure 차트의 반전 금액을 지정합니다. 기본값은 3입니다..
  • pointAndFigure.scaling: 기존, 고정 또는 동적 확장 모드.
  • Traditional: 상자 크기는 가격대를 기준으로 자동으로 계산됩니다..
  • Fixed: 상자 크기는 boxSize 속성으로 정의됩니다..
  • Dynamic: 상자 크기는 ATR을 기준으로 계산됩니다.

예제:

myFinancialChart.options = {
  kagi: {
     fields: wijmo.chart.finance.DataFields.Close,
     scaling: wijmo.chart.finance.PointAndFigureScaling.Fixed,
     reversal: 3
  }
}
Previous
기본 극좌표형 차트
Next
원통형 차트