# FlexChart의 깔대기형 차트(Funnel Charts)

## Content

깔때기형 차트(Funnel charts)는 프로세스의 여러 단계에 따라 값을 표시합니다. 예를 들어, 깔때기 차트를 사용하여 판매 파이프라인의 각 단계에서 판매 잠재 고객 수를 표시할 수 있습니다. 일반적으로 값은 점차 감소하여 막대가 깔때기와 비슷해집니다. 또한 조직의 영업 프로세스에서 잠재적인 문제 영역을 파악하는 데도 유용합니다.

FlexChart 컨트롤을 통해 깔때기 차트를 만들기 위해, 파이프라인을 따라 **bindingX** 속성을 단계가 포함된 속성의 이름으로 설정하고, 그리고 주어진 단계의 거래 양으로 \_\_binding\_\_설정된 단일 계열(Series)를 추가합니다.

옵션 특성을 통해 깔때기의 높이, 너비, 스타일을 조정할 수 있습니다.

* **funnel.neckWidth**: 깔때기형 차트의 목 너비를 백분율로 지정합니다. 기본값은 0.2입니다.
* **funnel.neckHeight**: 깔때기형 차트의 목 높이를 백분율로 지정합니다. 기본값은 0입니다.
* **funnel.type**: 깔때기형 차트의 유형을 지정합니다. 'rectangle' 또는 'default'여야 합니다. 유형이 rectangle으로 설정된 경우 neckWidth 및 neckHeight가 작동하지 않습니다.

예시:

```JavaScript
import * as chart from '@mescius/wijmo.chart';

var myChart = new chart.FlexChart('#myChart', {
    chartType: wijmo.chart.ChartType.Funnel,
    bindingX: 'country',
    series: [
        { name: 'Sales', binding: 'sales' }
    ],
    dataLabel: { content: '{y}' },
    options: {
        funnel: {
            neckWidth: 0.2,
            neckHeight: 0.2,
            type: 'default'
        }
    }
});
```

![advanced-special-chart-funnel-default](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/f0e94a5a-9d66-4b7c-8611-81d5cbaf01b7/advanced-special-chart-funnel-default.608a8b.png)
<span style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; letter-spacing: 0px;">다음은 'rectangle' 깔때기 차트의 모양입니다.</span>

```JavaScript
myChart.options.funnel.type = 'rectangle';
```

![advanced-special-chart-funnel-rectangle](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/f0e94a5a-9d66-4b7c-8611-81d5cbaf01b7/advanced-special-chart-funnel-rectangle.e6acae.png)