세로 막대형 차트와 버킷 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

열차트와 버킷차트를 사용하여 Highcharts에서 데이터를 표시하는 방법

열차트와 버킷차트는 Highcharts에서 흔히 사용되는 데이터 시각화 차트 유형으로, 다양한 카테고리의 데이터를 시각적으로 표시하고 크기를 비교할 수 있습니다. 이 글에서는 Highcharts를 사용하여 열 및 버킷 차트를 만드는 방법을 소개하고 자세한 코드 예제를 제공합니다.

먼저 Highcharts 라이브러리와 관련 종속 파일을 소개해야 합니다. 라이브러리 파일은 하이차트 공식 홈페이지(www.highcharts.com)에서 다운로드하여 HTML 파일로 도입할 수 있습니다. Highcharts 라이브러리는 JQuery에 의존하기 때문에 JQuery도 도입해야 합니다.

다음으로 세로 막대형 차트와 버킷 차트를 표시할 HTML 컨테이너를 만들어야 합니다. 아래와 같이 div 요소를 사용하고 고유한 ID 속성을 지정할 수 있습니다.

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

그런 다음 세로 막대형 차트와 버킷 차트에 표시할 데이터를 준비해야 합니다. 데이터는 서버에서 정적이거나 동적으로 얻을 수 있습니다. 여기서는 다음과 같은 데이터가 있다고 가정합니다.

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 }
];

다음으로 Highcharts를 사용하여 세로 막대형 및 버킷 차트를 만들 수 있습니다. 먼저 차트 유형, 제목, X축 및 Y축 레이블 등을 포함하여 차트의 구성 옵션을 정의해야 합니다. 그런 다음 데이터를 차트에 전달하고 차트 구성 옵션을 매개변수로 사용하여 차트를 생성해야 합니다. 구체적인 코드는 다음과 같습니다.

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '柱桶图'
    },
    xAxis: {
      categories: data.map(function(item) {
        return item.name;
      })
    },
    yAxis: {
      title: {
        text: '数值'
      }
    },
    series: [{
      name: '数值',
      data: data.map(function(item) {
        return item.value;
      })
    }]
  });
});

위 코드에서는 Highcharts의 차트 메소드를 사용하여 컬럼 및 버킷 차트를 생성했습니다. 그 중 Chart 속성은 차트의 종류를 컬럼(컬럼 차트)으로 지정하고, title 속성은 차트의 제목을 "컬럼 및 버킷 차트"로 지정하며, xAxis 속성은 X축의 레이블을 name 속성으로 지정합니다. 데이터에서 yAxis 속성은 Y축의 레이블을 "숫자 값"으로 지정합니다. series 속성은 차트의 데이터 시리즈를 지정하며, name 속성은 데이터 시리즈의 이름을 "value"로 지정하고, data 속성은 데이터 시리즈의 특정 값을 데이터의 value 속성으로 지정합니다.

마지막으로 Highcharts.chart 메소드의 첫 번째 매개변수를 이전에 생성된 HTML 컨테이너의 ID로 설정하여 차트를 해당 컨테이너에 렌더링합니다.

위 단계를 완료한 후 브라우저에서 코드를 실행하고 HTML 컨테이너에서 열 및 버킷 차트를 확인하여 데이터를 표시할 수 있습니다.

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