3D 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

Highcharts는 3D 차트를 포함하여 다양한 유형의 차트를 제공하는 매우 인기 있는 JavaScript 차트 라이브러리입니다. 이 글에서는 3D 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. Highcharts 라이브러리 소개

먼저 HTML 파일에 Highcharts 라이브러리를 도입해야 합니다. 이는 다음과 같은 방법으로 달성할 수 있습니다:

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

2. 데이터 준비

3D 차트에 표시할 일부 데이터를 준비해야 합니다. 이 데이터는 일반적으로 배열로 구성된 JavaScript 개체입니다. 예:

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

이 개체에는 4개의 서로 다른 데이터 시리즈가 포함되어 있으며 각 시리즈에는 이름과 배열이 포함되어 있으며 배열의 각 요소는 데이터 포인트를 나타냅니다.

3. 3D 차트 만들기

다음으로 3D 차트를 만들 수 있습니다. 먼저 어떤 유형의 차트를 만들 것인지 결정해야 합니다. Highcharts는 3D 세로 막대형 차트, 3D 분산형 차트, 3D 원통형 차트, 3D 지도 등 다양한 유형의 3D 차트를 제공합니다. 이 기사에서는 다음 코드를 사용하여 3D 세로 막대형 차트를 만듭니다.

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

먼저 HTML 문서에 우리가 만든 차트가 포함될 "container"라는 div를 정의합니다.

그런 다음 Highcharts.chart() 메서드를 사용하여 차트를 만듭니다. 차트 옵션에서 유형을 "column"으로 설정했는데, 이는 세로 막대형 차트를 생성한다는 의미입니다. 또한 options3d 옵션을 설정하고, 3D 기능을 활성화하고, 알파 및 베타 각도, 깊이 등과 같은 일부 3D 매개변수를 설정합니다.

또한 기둥형 차트의 깊이를 설정하기 위해 몇 가지 제목과 축 옵션은 물론 플롯 옵션의 열 옵션도 정의했습니다.

마지막으로 데이터 시리즈를 지정하고, 앞서 정의한 데이터 객체를 이용하여 각 시리즈의 이름과 데이터를 설정합니다.

4. 코드 실행

이제 코드가 준비되었으며 브라우저에서 실행할 수 있습니다. HTML 파일을 로드하고 그래프를 보면 앞서 정의한 데이터를 사용하여 매월 평균 기온을 표시하는 3D 세로 막대형 차트가 표시됩니다.

코드 예제는 다음 코드 저장소에서 볼 수 있습니다.

https://github.com/Jackie199199/Highcharts-3D-Demo

Summary

Highcharts는 다양한 차트를 제공하는 매우 강력한 JavaScript 차트 라이브러리입니다. 3D 차트를 포함한 유형 및 기능. 이 글에서는 Highcharts에서 3D 차트를 만드는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 웹 페이지나 애플리케이션에 고품질의 대화형 데이터 시각화를 추가하려는 경우 Highcharts가 최선의 옵션 중 하나일 수 있습니다.

위 내용은 3D 차트를 사용하여 Highcharts에 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!