Highcharts를 사용하여 직사각형 트리 차트를 만드는 방법-JS 튜토리얼-php.cn

Highcharts를 사용하여 직사각형 트리 차트를 만드는 방법

WBOY

풀어 주다： 2023-12-18 08:25:22

원래의

767명이 탐색했습니다.

Highcharts를 사용하여 직사각형 트리 차트를 만드는 방법

Highcharts는 사용할 수 있는 다양한 차트 유형을 제공하는 인기 있는 JavaScript 차트 라이브러리입니다. 그 중 하나는 직사각형 트리 다이어그램으로, 이를 통해 계층적 데이터를 시각적으로 표시할 수 있습니다. 이 기사에서는 Highcharts를 사용하여 직사각형 트리 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1단계: Highcharts 설치 및 소개

먼저 Highcharts 공식 웹사이트에서 Highcharts 라이브러리 파일을 다운로드하여 프로젝트에 도입해야 합니다. 다음 두 가지 방법으로 얻을 수 있습니다.

Highcharts 라이브러리 파일을 다운로드하여 HTML 파일에 도입합니다.
npm을 통해 Highcharts를 설치하고 프로젝트에 도입합니다.

다음은 Highcharts 라이브러리 파일을 소개하는 샘플 HTML 파일입니다. Highcharts 라이브러리 코드:

<!DOCTYPE html>
<html>
<head>
  <title>矩形树图表示例</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

로그인 후 복사

2단계: 데이터 준비

직사각형 트리 차트를 만들기 전에 계층적 데이터를 준비해야 합니다. 직사각형 트리 차트의 데이터 형식은 객체의 중첩 배열입니다. 각 객체에는 이름(노드 이름) 및 값(노드 값) 속성뿐만 아니라 하위 속성(하위 노드를 포함하는 배열)이 포함됩니다. 다음은 샘플 데이터입니다.

var data = {
  name: '根节点',
  value: 10,
  children: [
    {
      name: '子节点1',
      value: 5,
      children: []
    },
    {
      name: '子节点2',
      value: 3,
      children: [
        {
          name: '子节点2.1',
          value: 2,
          children: []
        },
        {
          name: '子节点2.2',
          value: 1,
          children: []
        }
      ]
    },
    {
      name: '子节点3',
      value: 2,
      children: []
    }
  ]
};

로그인 후 복사

3단계: 직사각형 트리 차트 만들기

다음으로 Highcharts의 chart 메서드를 사용하여 직사각형 트리 차트를 만들 수 있습니다. chart 메소드에서는 차트 유형을 RectangularTree로 지정하고 제목, 데이터 등 기타 필수 속성을 설정해야 합니다. chart方法来创建矩形树图表。在chart方法中，我们需要指定图表的类型为rectangularTree，同时设置好其他必要的属性，如标题、数据等。

下面是一个创建矩形树图表的代码示例：

Highcharts.chart('container', {
  chart: {
    type: 'rectangularTree'
  },
  title: {
    text: '矩形树图表示例'
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    levelIsConstant: false,
    data: [data]
  }]
});

로그인 후 복사

在上面的代码中，我们指定了图表类型为rectangularTree，设置了标题为矩形树图表示例。接着，在series属性中定义了一个treemap系列，设置了布局算法为squarified，允许点击节点进行钻取，以及设置了数据为我们准备好的数据[data]

다음은 직사각형 트리 차트를 생성하는 코드 예제입니다.

rrreee

위 코드에서는 차트 유형을 사각형 트리로 지정하고 제목을 사각형 트리 차트 예제 코드>. 다음으로, <code>treemap 시리즈가 series 속성에 정의되고, 레이아웃 알고리즘이 squarified로 설정되어 드릴링을 위해 노드를 클릭할 수 있습니다. 우리를 위해 준비된 데이터 [data].

4단계: 브라우저에서 미리보기

마지막으로 브라우저에서 HTML 파일을 미리 보면 생성된 직사각형 트리 차트를 볼 수 있습니다. 차트는 데이터의 계층 구조를 기반으로 자동으로 직사각형을 그리며 노드를 클릭하여 확장 및 축소할 수 있습니다. 🎜🎜위 단계를 통해 Highcharts를 사용하여 직사각형 트리 차트를 성공적으로 생성하고 구체적인 코드 예제를 보여주었습니다. 자신의 필요에 따라 레이아웃 알고리즘, 스타일 및 기타 속성을 조정하고 자신의 데이터를 기반으로 원하는 직사각형 트리 차트를 생성할 수 있습니다. Highcharts는 보다 맞춤화된 효과를 달성하는 데 도움이 되는 풍부한 구성 옵션을 제공합니다. 이 기사가 Highcharts를 사용하여 직사각형 트리 차트를 만드는 데 도움이 되기를 바랍니다. 🎜

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