Highcharts를 사용하여 피라미드 차트를 만드는 방법-JS 튜토리얼-php.cn

Highcharts를 사용하여 피라미드 차트를 만드는 방법

王林

풀어 주다： 2023-12-17 22:18:46

원래의

1291명이 탐색했습니다.

Highcharts를 사용하여 피라미드 차트를 만드는 방법

소개:
피라미드 차트는 계층적 관계를 표시하는 데 사용되는 시각화 도구로, 데이터의 분포와 비례 관계를 시각적으로 표현할 수 있습니다. 데이터 분석 및 의사 결정 지원에서 피라미드 차트는 다양한 수준의 비율이나 그룹 분포를 나타내는 데 자주 사용됩니다. 이 기사에서는 Highcharts 라이브러리를 사용하여 피라미드 차트를 만드는 방법을 소개하고 자세한 코드 예제를 제공합니다.

1단계: Highcharts 라이브러리 소개
먼저 Highcharts 라이브러리 파일을 HTML에 도입해야 합니다. 이는

태그에 다음 코드를 추가하여 수행할 수 있습니다.

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

로그인 후 복사

2단계: 컨테이너 생성
HTML에서는 피라미드 차트를 표시하기 위한 컨테이너 요소를 생성해야 합니다. 다음 코드를 추가하여

요소를 생성할 수 있습니다.

<div id="container" style="width: 500px; height: 400px;"></div>

로그인 후 복사

3단계: 데이터 정의
JavaScript에서는 피라미드 차트에 필요한 데이터를 정의해야 합니다. 특히 데이터의 이름과 값을 정의해야 합니다. 데이터는 다음 코드로 정의할 수 있습니다:

var data = [
  {
    name: '第一层级',
    value: 30
  },
  {
    name: '第二层级',
    value: 50
  },
  {
    name: '第三层级',
    value: 70
  }
];

로그인 후 복사

4단계: 피라미드형 차트 만들기
JavaScript에서는 Highcharts를 사용하여 피라미드형 차트를 만들 수 있습니다. 먼저 Highcharts.chart() 메소드를 통해 기본 차트 객체를 생성하고 컨테이너 요소의 ID를 지정해야 합니다. 그런 다음 options 속성을 통해 차트 구성 항목을 설정할 수 있습니다. 다음 코드를 통해 피라미드 차트를 생성할 수 있습니다.

Highcharts.chart('container', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '金字塔图表示例'
  },
  series: [{
    name: '金字塔图',
    data: data
  }]
});

로그인 후 복사

5단계: 피라미드 차트의 스타일 및 인터랙티브 효과 설정
차트의 구성 항목을 설정하여 피라미드 차트의 스타일 및 인터랙션 효과를 변경할 수 있습니다. 다음은 일반적으로 사용되는 구성 항목의 몇 가지 예입니다.

title: {
  text: '金字塔图表示例',
  style: {
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold'
  }
},
plotOptions: {
  pyramid: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y}%',
      color: '#333'
    }
  }
},
tooltip: {
  formatter: function() {
    return this.point.name + ': ' + this.point.y + '%';
  }
}

로그인 후 복사

요약:
위 단계를 통해 Highcharts 라이브러리를 사용하여 피라미드 차트를 만들고 필요에 따라 차트의 스타일과 대화형 효과를 사용자 지정할 수 있습니다. 이 기사가 독자들이 Highcharts를 사용하여 피라미드 차트를 만들고 이를 데이터 분석 및 의사 결정 지원 작업에 적용하는 데 도움이 되기를 바랍니다.

참조 링크: https://www.highcharts.com/docs/chart-and-series-types/pyramid-chart

위 내용은 Highcharts를 사용하여 피라미드 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!