[]
wijmo.chart.analytics 모듈에는 다음과 같이 계열(Series) 클래스를 확장하여 데이터에 대한 추가 정보를 제공하는 클래스가 포함되어 있습니다 : 추세선(trend lines),이동 평균(moving averages), 오차 막대(error bars), 상자 및 폭포 플롯(box and waterfall plots), 함수 플롯(plots).
폭포 차트(Waterfall Charts)는 순차적으로 도입된 양수 또는 음수 값의 누적 효과를 이해하는 데 도움이 됩니다. 이는 일련의 변화를 통해 시작 위치가 어떻게 증가하거나 감소하는지 보여줍니다. 폭포 차트는 기둥이 공중에 떠 있는 것처럼 보이기 때문에 "플라잉 브릭(flying bricks)" 차트 또는 마리오 차트(Mario chart)라고도 합니다.
아래 단계에 따라 차트에 폭포 차트를 추가할 수 있습니다:
예시:
import * as chart from '@grapecity/wijmo.chart';
import * as analytics from '@grapecity/wijmo.chart.analytics';
// create Waterfall series for 'sales' and add it to the chart
var sales = new analytics.Waterfall();
sales.name = 'Sales';
sales.binding = 'sales';
sales.styles = {
start: { fill: 'blue', stroke: 'blue' },
total: { fill: 'yellow', stroke: 'yellow' },
falling: { fill: 'red', stroke: 'red' },
rising: { fill: 'green', stroke: 'green' }
};
myChart.series.push(sales);
스타일을 사용자 지정하는 것 외에도, Waterfall 클래스에는 구성할 수 있는 몇 가지 다른 옵션이 있습니다.
아래의 스타일이 지원됩니다:
완성된 예시:
import * as chart from '@grapecity/wijmo.chart';
import * as analytics from '@grapecity/wijmo.chart.analytics';
// create Waterfall series with all options
var waterfall = new analytics.Waterfall({
relativeData: true,
connectorLines: true,
showTotal: true,
start: 1000,
showIntermediateTotal: true,
intermediateTotalPositions: [3, 6, 9, 12],
intermediateTotalLabels: ['Q1', 'Q2', 'Q3', 'Q4'],
name: 'Increase,Decrease,Total',
styles: {
connectorLines: {
stroke: '#333',
strokeWidth: 3
},
start: {
fill: '#7dc7ed'
},
falling: {
fill: '#dd2714',
stroke: '#a52714'
},
rising: {
fill: '#0f9d58',
stroke: '#0f9d58'
},
intermediateTotal: {
fill: '#7dc7ed'
},
total: {
fill: '#7dc7ed'
}
}
});
myChart.series.push(waterfall);
폭포(Waterfall) 계열(Series)는 FlexChart의 모든 계열처럼 지원됩니다. 아래 중 visibility 속성을 설정하여 폭포(Waterfall) 계열의 범례 항목 표시 여부를 선택할 수 있습니다:
범례 텍스트는 폭포(Waterfall) 계열(Series)의 이름 속성을 통해 설정됩니다.