[Highcharts] Getting started with Highcharts 3D support

Getting started with Highcharts 3D support

Highcharts 3D는 차트에 제한적으로 3D 효과를 제공하는 highcharts 모듈이다. 현재까지 3D column chart, 3D pie chart, 그리고 3D scatter chart가 제작 가능하다. 

 

LOAD THE REQUIRED FILES.

Highcharts 3D를 사용하기 위해선 평소처럼 Highcharts를 불러오고 추가적인 3D 플러그인 모듈을 로드해야 한다:

<script src="https://code.highcharts.com/highcharts-3d.js"><script>

(위 코드가 highcharts.js 이후에 추가되어야 한다)

 

CONFIGURING THE 3D OPTIONS FOR A CHART.

3D 모듈을 로딩하는 것만으로 기존에 있던 차트 틀을 변경하진 않는다. 정확하게 3D로 설정이 되어야 3D와 일반 차트가 페이지에 표시된다. 일반적으로 3D 차트의 설정은 옵션의 chart 섹션에서 이루어진다. 반면에 다른 차트의 어떤 특정 세팅들은 plotOptions에서 확인할 수 있는데 아래에 3D 옵션들을 확인할 수 있다. 

chart: {
    ....
    options3d: {
        enabled: 'boolean value',
        alpha: 'numeric value',
        beta: 'numeric value',
        depth: 'numeric value',
        viewDistance: 'numeric value',
        frame: {
            bottom: {
                size: 'numeric value',
                color: 'color value'
            },
            side: {
                size: 'numeric value',
                color: 'color value'
            },
            back: {
                size: 'numeric value',
                color: 'color value'
            }
       }
   },
   ...
}
...
plotOptions: {
    ...
    column: {
        ...
        depth: 'numeric value',
        groupZPadding: 'numeric value',
        ...
    },
    ...
    pie: {
        depth: 'numeric value'
    },
    ...
}

General

모든 3D 차트에서 아래 옵션들은 매우 중요하다 (chart.options3d 부분):

• enabled : 3D 차트를 보여줄지를 설정. true로 설정한다.
• depth : 차트의 깊이. 기본값 100.
• viewDistance : 보는 시각이 차트로부터 얼마나 멀리 있는지를 정의.
• alpha & beta : 차트의 뷰 회전

낮은 viewDistance 값은 차트를 너무 가까이서 보게 되어 원치 않은 결과를 낳을 수 있음을 주의하라.

 

chart.potions3d에서는 frame이라고 불리는 세 개의 pane을 만들 수 있다. 기본값으로 세 개의 pane가 보이도록 설정되는데 이를 chart.options.3d.frame에서 각각 따로 설정할 수도 있다. 

bottom|side|back: {
    size:   The thickness of the pane (defaults to 0)
    color:  The color of the pane (default to transparent)
}

3D Columns

columns 타입의 3D 차트는 각각의 칼럼을 직육면체로 그려 삼차원 효과를 만든다. 기본 설정으로 칼럼의 깊이는 25로 설정된다. 다른 깊이 설정을 위해서는 plotOption로가서 칼럼의 깊이를 정의한다:

plotOptions.column.depth: The depth of each individual column.

DISPLAYING MULTIPLE COLUMNS

보통의 column 차트처럼, Highcharts 3D 플러그인도 여러 개의 차트 시리즈를 grouping과 stacking 기술을 이용해 나타낼 수 있다. 

 

기본 설정으로, grouping은 Highcharts에서 true로 설정되어있으며 각 칼럼은 앞열에서 각각 나타나게 된다. grouping을 false로 설정하면, 각 칼럼은 서로의 뒤에 나열되어 나타난다. 기본 설정은 각 칼럼이 빈 공간 없이 놓이도록 설정되어 있는데 이는 groupZPadding 옵션을 통해 변경 가능하다. 

plotOptions.column.groupZPadding: Spacing between columns on the z-axis.

차트의 깊이 설정이 모든 칼럼을 보여주기에 충분한지 주의하라. 적어도 아래와 같은 깊이 값이 필요하다: 칼럼의 개수 * (칼럼의 깊이 + z-padding)

 

일반적인 Highcharts column 차트에서는 칼럼을 쌓을 수 있는데, 3D 또한 정확하게 같은 방식으로 가능하다. stacking을 true로 설정하고 각 시리즈의 스택 넘버를 정의하면 된다.

3D Pie

pie 차트에서 총차트의 깊이는 중요하지 않고 프레임 설정도 아무런 영향을 미치지 않는다(프레임은 축과 연결되어 있고 파이는 다른 차트처럼 축을 가지고 있지 않다). pie 차트에서는 plotOptions에서 깊이 특성을 적절하게 설정하는 것이 중요하다. 

plotOptions.pie.depth: Defines the 'thickness' of the pie.

3D Scatter

보통의 scatter 차트에서의 x와 y좌표와 더불어, 3D 플러그인은 추가로 z좌표를 추가로 가져 3차 원상에 놓게 된다. 다른 보통의 차트와 비슷하게 좌표들은 배열 혹은 리터럴로 보낼 수 있다. 

{x: 1, y: 1, z: 1} is the same point as [1,1,1]

3D Area

area 타입의 3D 차트는 columns 시리즈와 비슷하게 동작한다. 각각의 area 시리즈를 3차원으로 그리게 된다. 기본 설정으로 area 시리즈의 깊이 값은 25이다. 

DISPLAYING MULTIPLE AREAS

다른 area 차트와 마찬가지로 Highcharts 3D 플러그인도 다수의 area 시리즈를 groupig과 stacking으로 나타낼 수 있다. 

 

깊이가 전체 area 시리즈를 보여줄 수 있도록 충분한 값이 설정되어야 한다. 적어도 아래와 같은 깊이 값이 필요하다: (area 시리즈의 개수 -1) * (area 시리즈 하나의 깊이)

 

Stacking은 3D 차트에서도 가능하며 똑같이 동작한다. stacking 설정을 true로 하면 된다.