Comment utiliser un graphique sunburst pour afficher des données dans Highcharts-js tutoriel-php.cn

Comment utiliser un graphique sunburst pour afficher des données dans Highcharts

王林

Libérer： 2023-12-18 08:18:55

original

1135 Les gens l'ont consulté

Comment utiliser un graphique sunburst pour afficher des données dans Highcharts

Un graphique sunburst est un graphique visuel avec une structure hiérarchique qui peut être utilisé pour montrer la relation hiérarchique et la relation proportionnelle des données. Dans Highcharts, nous pouvons créer un graphique sunburst en définissant les paramètres pertinents et en utilisant les formats de données appropriés. Cet article explique comment utiliser la bibliothèque Highcharts pour créer un graphique sunburst et fournit un exemple de code pour référence.

1. Format des données

Dans Highcharts, le format de données du graphique sunburst est une donnée en forme d'arborescence basée sur une structure hiérarchique. Chaque nœud contient les attributs suivants :

name : nom du nœud
value : la valeur du nœud, utilisée pour déterminer la taille du nœud (peut être un nombre ou une chaîne)
children : tableau de nœuds enfants, représentant le nœud actuel Nœud enfant

Ce qui suit est un exemple de données simple :

{
    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
                }
            ]
        }
    ]
}

Copier après la connexion

2. Exemple de code

Ce qui suit est un exemple de code de base de graphique sunburst :

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'
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons chart L'objet définit le type de graphique sur graphique sunburst. L'attribut data dans series est un tableau utilisé pour stocker les données des graphiques sunburst. Chaque nœud est défini à l'aide des attributs name, value et color. En définissant l'attribut children, vous pouvez imbriquer des relations hiérarchiques. chart对象设置图表类型为旭日图。series中的data属性是一个数组，用来存储旭日图的数据。每个节点都使用name、value和color属性来定义。通过设置children属性，可以嵌套表示层级关系。

三、图表属性和样式调整

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

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

Highcharts fournit une multitude de propriétés et de méthodes pour ajuster le style et le comportement du graphique sunburst. Voici quelques propriétés courantes :

chart.polar : valeur booléenne, utilisée pour spécifier s'il s'agit d'une carte polaire. La valeur par défaut est false.

chart.startAngle : Nombre, utilisé pour spécifier l'angle de départ de la carte sunburst. La valeur par défaut est 0. 🎜🎜series.dataLabels.format : Chaîne, utilisée pour spécifier le format d'affichage des étiquettes de données. Prend en charge les espaces réservés, tels que {point.node.name} pour représenter le nom du nœud. 🎜🎜series.levels : utilisé pour définir des styles à différents niveaux. Vous pouvez définir la couleur, le rayon d'expansion, etc. de différents niveaux. 🎜🎜🎜Pour plus de détails sur l'ajustement des attributs et du style, veuillez vous référer à la documentation officielle de Highcharts. 🎜🎜4. Résumé🎜🎜Cet article explique comment utiliser les graphiques sunburst pour afficher des données dans Highcharts et fournit des exemples de code. Le graphique sunburst est un graphique visuel adapté à l'affichage des relations hiérarchiques et des relations proportionnelles, et peut être utilisé pour l'analyse et la présentation des données. En définissant le format de données approprié et en ajustant les propriétés associées, nous pouvons créer différents styles de graphiques sunburst pour répondre à différents besoins. J'espère que cet article vous sera utile lors de la création d'un graphique sunburst à l'aide de Highcharts. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!