선버스트 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

선버스트 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

선버스트 차트는 데이터의 계층 관계와 비례 관계를 표시하는 데 사용할 수 있는 계층 구조의 시각적 차트입니다. Highcharts에서는 관련 매개변수를 설정하고 적절한 데이터 형식을 사용하여 선버스트 차트를 만들 수 있습니다. 이 기사에서는 Highcharts 라이브러리를 사용하여 선버스트 차트를 만드는 방법을 소개하고 참조용 샘플 코드를 제공합니다.

1. 데이터 형식

하이차트에서 선버스트 차트의 데이터 형식은 계층적 구조를 기반으로 한 트리 형태의 데이터입니다. 각 노드에는 다음 속성이 포함됩니다.

• name: 노드 이름
• value: 노드의 크기를 결정하는 데 사용되는 노드 값(숫자 또는 문자열일 수 있음)
• children: 하위 노드 배열, 현재 노드를 나타내는 하위 노드

다음은 간단한 데이터 예시입니다.

{
    name: "总部",
    value: 1000,
    children: [
        {
            name: "部门A",
            value: 500,
            children: [
                {
                    name: "小组A1",
                    value: 200
                },
                {
                    name: "小组A2",
                    value: 300
                }
            ]
        },
        {
            name: "部门B",
            value: 500,
            children: [
                {
                    name: "小组B1",
                    value: 200
                },
                {
                    name: "小组B2",
                    value: 300
                }
            ]
        }
    ]
}

2. 코드 예시

다음은 기본 선버스트 차트 코드 예시입니다.

Highcharts.chart('container', {
    chart: {
        type: 'sunburst'
    },
    title: {
        text: '旭日图示例'
    },
    series: [{
        data: [
            {
                name: "总部",
                value: 1000,
                color: '#FAD107',
                children: [
                    {
                        name: "部门A",
                        value: 500,
                        color: '#34C1FE',
                        children: [
                            {
                                name: "小组A1",
                                value: 200,
                                color: '#FF0084'
                            },
                            {
                                name: "小组A2",
                                value: 300,
                                color: '#FF47A3'
                            }
                        ]
                    },
                    {
                        name: "部门B",
                        value: 500,
                        color: '#68C600',
                        children: [
                            {
                                name: "小组B1",
                                value: 200,
                                color: '#FF8000'
                            },
                            {
                                name: "小组B2",
                                value: 300,
                                color: '#FFA935'
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

위 코드에서는 chart를 사용합니다. 개체는 차트 유형을 선버스트 차트로 설정합니다. series의 data 속성은 선버스트 차트 데이터를 저장하는 데 사용되는 배열입니다. 각 노드는 name, value 및 color 속성을 ​​사용하여 정의됩니다. children 속성을 ​​설정하면 계층 관계를 중첩할 수 있습니다. chart对象设置图表类型为旭日图。series中的data属性是一个数组，用来存储旭日图的数据。每个节点都使用name、value和color属性来定义。通过设置children属性，可以嵌套表示层级关系。

三、图表属性和样式调整

Highcharts提供了丰富的属性和方法，用来调整旭日图的样式和行为。以下是一些常用属性：

• chart.polar：布尔值，用于指定是否为极坐标图。默认为false。
• chart.startAngle：数字，用于指定旭日图的起始角度。默认为0。
• series.dataLabels.format：字符串，用于指定数据标签的显示格式。支持占位符，如{point.node.name}表示节点名称。
• series.levels
3. 차트 속성 및 스타일 조정

Highcharts는 선버스트 차트의 스타일과 동작을 조정하는 다양한 속성과 메서드를 제공합니다. 다음은 몇 가지 일반적인 속성입니다.

chart.pole: 극좌표 차트인지 여부를 지정하는 데 사용되는 부울 값입니다. 기본값은 false입니다.

chart.startAngle: 숫자, 선버스트 차트의 시작 각도를 지정하는 데 사용됩니다. 기본값은 0입니다. 🎜🎜series.dataLabels.format: 문자열, 데이터 레이블의 표시 형식을 지정하는 데 사용됩니다. 노드 이름을 나타내는 {point.node.name}와 같은 자리 표시자를 지원합니다. 🎜🎜series.levels: 다양한 수준에서 스타일을 정의하는 데 사용됩니다. 다양한 레벨의 색상, 확장 반경 등을 설정할 수 있습니다. 🎜🎜🎜속성 및 스타일 조정에 대한 자세한 내용은 Highcharts 공식 문서를 참조하세요. 🎜🎜4. 요약🎜🎜이 글에서는 선버스트 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 소개하고 코드 예제를 제공합니다. 선버스트 차트(Sunburst Chart)는 계층적 관계와 비례관계를 표시하는데 적합한 시각적 차트로, 데이터 분석 및 프리젠테이션에 활용될 수 있습니다. 적절한 데이터 형식을 설정하고 관련 속성을 조정함으로써 다양한 요구 사항을 충족하는 다양한 스타일의 선버스트 차트를 만들 수 있습니다. Highcharts를 사용하여 선버스트 차트를 만들 때 이 기사가 도움이 되기를 바랍니다. 🎜

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