Highcharts를 사용하여 깔때기형 차트를 만드는 방법

Highcharts를 사용하여 깔때기형 차트를 만드는 방법

데이터 시각화 분야에서 깔때기형 차트는 데이터의 흐름, 필터링 및 변환 과정을 시각적으로 표시하는 일반적인 차트 유형입니다. Highcharts는 다양한 차트 유형과 사용자 정의 옵션을 제공하는 강력한 JavaScript 차트 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 깔때기형 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 Highcharts 라이브러리와 필요한 스타일 시트를 소개해야 합니다. HTML 파일의 헤드에 다음 코드를 추가합니다.

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

다음으로 HTML 파일의 본문 부분에 컨테이너 요소를 추가하여 깔때기형 차트를 표시합니다.

<div id="container"></div>

그런 다음 JavaScript 부분에 Highcharts 구성 개체를 만들고 깔때기형 차트에 대한 관련 옵션을 설정합니다. 다음은 기본 구성 예시입니다.

var options = {
  chart: {
    type: 'funnel',
    marginRight: 100
  },
  title: {
    text: '漏斗图表示例'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> ({point.y})',
        connectorColor: 'silver'
      },
      neckWidth: '30%',
      neckHeight: '25%'
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: '流失率',
    data: [
      ['浏览量', 5000],
      ['点击量', 4000],
      ['加入购物车', 3000],
      ['下单量', 2000],
      ['支付量', 1000]
    ]
  }]
};

위 구성에서는 차트 종류를 깔때기형 차트('깔때기'), 차트 제목('깔때기형 차트 예'), 깔때기 데이터를 설정했습니다. 차트. 그 중 데이터는 배열 형태로 표현되며 각 배열 요소에는 두 개의 값이 포함됩니다. 첫 번째 값은 처리 단계의 이름을 나타내고 두 번째 값은 단계 번호를 나타냅니다.

다음으로 Highcharts의 chart 기능을 사용하여 지정된 컨테이너에 차트를 그릴 수 있습니다.

Highcharts.chart('container', options);

위의 코드를 JavaScript 섹션에 추가하여 Highcharts를 사용하여 간단한 깔때기형 차트를 만듭니다.

위에 언급된 기본 구성 옵션 외에도 Highcharts는 깔때기형 차트의 모양과 상호 작용을 사용자 정의할 수 있는 풍부한 옵션도 제공합니다. 구성 개체의 속성을 수정하여 이러한 사용자 지정 기능을 구현할 수 있습니다.

options.plotOptions.series.dataLabels.format = '<b>{point.name}</b> ({point.y}，{point.percentage:.1f}%)';
options.plotOptions.series.minHeight = '10';
options.legend.enabled = true;

예를 들어 데이터 레이블의 형식을 수정하고, 깔때기형 차트의 최소 높이를 조정하여 범례를 활성화할 수 있습니다.

위 단계를 통해 Highcharts 라이브러리를 사용하여 깔때기형 차트를 만들고 필요에 따라 맞춤 설정할 수 있습니다. Highcharts는 다른 풍부한 차트 유형과 옵션도 제공합니다. 공식 문서에서 자세한 내용을 확인할 수 있습니다. 이 기사가 Highcharts를 사용하여 깔때기형 차트를 만드는 방법을 배우는 데 도움이 되기를 바랍니다.

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