[]
        
(Showing Draft Content)

차트 유형

FlexChart 컨트롤에는 차트 유형을 사용자 정의할 수 있는 세 가지 속성이 있습니다:

  • chartType: 모든 계열(Series)에 사용할 기본 차트 유형을 선택합니다. 개별 계열(Series)은 이 설정을 재정의하여 여러 차트 유형을 결합할 수 있습니다.
  • stacking: 계열(series)을 독립적으로 플롯할지, 누적할지, 누적하여 합이 100%가 되도록 할 지 결정합니다.
  • rotated: X, Y 축을 대칭 이동하여 X가 수직이 되고 Y가 수평이 되도록 합니다.

예시:

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

  var myChart = new wjChart.FlexChart('#myChart', {
    chartType: 'Area',
    stacking: 'Stacked',
    rotated: true
  });
  • FlexChart는 다음과 같은 데카르트(Cartesian) 차트 유형을 지원합니다.
  • Column: 세로 막대를 표시하며 여러 범주 간에 항목 값을 비교할 수 있습니다.범위 열에도 이 차트 유형을 사용합니다.
  • Bar: 가로 막대를 표시합니다. 범위 막대에도 이 차트 유형을 사용합니다.
  • Scatter: X 및 Y 좌표를 사용하여 데이터 내의 패턴을 표시합니다.
  • Line: 일정 기간 동안 또는 여러 카테고리에 걸친 추세를 표시합니다.
  • LineSymbols: 각 데이터 포인트에 기호가 있는 꺽은선형 차트를 표시합니다.
  • Area: 선 아래 영역이 색으로 채워진 선 차트를 표시합니다.
  • Bubble: 기호의 크기를 결정하는 세 번째 데이터 값이 포함된 분산형 차트를 표시합니다.
  • Candlestick: 고가, 저가, 시가 및 종가가 있는 항목을 표시합니다. 꼬리의 길이는 고가 및 저가에 의해 결정되는 반면 막대의 크기는 시가 및 종가에 의해 결정됩니다. 종가가 시가보다 높거나 낮음에 따라 막대의 색상이 다르게 표시됩니다.
  • HighLowOpenClose: 시가가 왼쪽에 선을 사용하여 표시되고 오른쪽에 선이 종가를 나타내는 것을 제외하고는 캔들스틱 차트(Candlestick Chart)와 동일한 정보를 표시합니다.
  • Spline: 데이터 포인트를 통해 각진 선이 아닌 곡선 차트를 표시합니다.
  • SplineSymbols: 각 데이터 포인트에 기호가 있는 스플라인 차트를 표시합니다.
  • SplineArea: 선 아래의 영역이 색상으로 채워진 스플라인 차트를 표시합니다.
  • Funnel: 일반적으로 판매 파이프라인과 같은 프로세스의 단계를 나타내는, 깔때기형 차트(funnel chart)를 표시합니다.

FlexChart는 다음 stacking 옵션을 지원합니다:

  • Stacked: 누적 차트는 각 값이 합계에 기여하는 방식을 보여줍니다.
  • Stacked100pc: 100% 누적형 차트는 각 계열(Series)의 상대적 크기로 각 값이 총계에 얼마나 기여하는지와 함께 각 값이 총계에 기여하는 방식을 보여 줍니다.
  • None: stacking 없이, 각 계열(Series)의 객체는 독립적으로 플로팅됩니다.

차트 유형 결합

FlexChart의 각 계열(Series) 객체는 자체 __차트 타입__을 지정하여 차트의 기본값을 재정의할 수 있습니다. 이를 통해 하나의 차트에서 여러 차트 유형을 쉽게 결합할 수 있습니다. 차트 유형이 설정되지 않은 모든 계열(Series)은 상위 차트 유형을 사용합니다.

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

var myChart = new wjChart.FlexChart('#myChart', {
    chartType: 'Column',
    bindingX: 'Country',
    series: [
        { name: 'Sales', binding: 'Sales' },
        { name: 'Expenses', binding: 'Expenses' },
    	{ name: 'Downloads', binding: 'Downloads', chartType: 'LineSymbols',  }
    ]
  });

Multiple Chart Types

다른 차트 유형

추가 차트 유형은 FlexPie 및 FlexRadar와 같은 다른 컨트롤에서 지원됩니다. 고급 개념\특별 차트 유형에서 이러한 컨트롤과 관련된 추가 항목을 찾을 수 있습니다.

  • FinancialChart: 추가 재무 차트 유형을 포함한 전문 재무 차트 컨트롤 (HeikinAshi, LineBreak, Renko, Kagi, ColumnVolume, EquiVolume, CandleVolume, ArmsCandleVolume, PointAndFigure). 자세한 내용은 재무차트를 확인해 주시길 바랍니다.
  • FlexPie: FlexPie 컨트롤은 선택 가능한 슬라이스가 있는 원형 및 도넛 차트를 제공합니다. 자세한 내용은 원형 & 도넛 차트를 확인해 주시길 바랍니다.
  • FlexRadar: 방사형(Radar) 및 극좌표계 차트(Polar)를 만드는 데 사용되는 방사형 차트 컨트롤 (Column, Scatter, Line, LineSymbols, Area). 자세한 내용은 방사형 & 극좌표계 차트를 확인해주시길 바랍니다.
  • Sunburst: 선버스트 차트(Sunburst Chart) 컨트롤. 자세한 내용은 (선버스트)Sunburst를 확인해 주시길 바랍니다.
  • TreeMap: 트리맵(TreeMap) 컨트롤은 계층적(트리 구조) 데이터를 중첩된 사각형 집합으로 표시합니다.자세한 내용은 트리맵(TreeMap)을 확인해주시길 바랍니다.
  • Range Bar & Column: FlexChart 열 및 막대 차트(Column and Bar chart) 유형을 사용하여 범위 열 및 막대 차트를 표시할 수도 있습니다. 자세한 내용은 범위 막대(Range Bar) & 열차트(Column Charts)을 확인해주시길 바랍니다.