Cara menggunakan carta sunburst untuk memaparkan data dalam Highcharts-tutorial js-php.cn

Cara menggunakan carta sunburst untuk memaparkan data dalam Highcharts

王林

Lepaskan： 2023-12-18 08:18:55

asal

1135 orang telah melayarinya

Cara menggunakan carta sunburst untuk memaparkan data dalam Highcharts

Carta sunburst ialah carta visual dengan struktur hierarki yang boleh digunakan untuk menunjukkan hubungan hierarki dan hubungan berkadar data. Dalam Highcharts, kita boleh mencipta carta sunburst dengan menetapkan parameter yang berkaitan dan menggunakan format data yang sesuai. Artikel ini akan memperkenalkan cara menggunakan perpustakaan Highcharts untuk mencipta carta sunburst dan menyediakan beberapa contoh kod untuk rujukan.

1. Format data

Dalam Highcharts, format data carta sunburst ialah data berbentuk pokok berdasarkan struktur hierarki. Setiap nod mengandungi atribut berikut:

nama: nama nod
nilai: nilai nod, digunakan untuk menentukan saiz nod (boleh menjadi nombor atau rentetan)
kanak-kanak: tatasusunan nod anak, mewakili nod semasa Nod kanak-kanak

Berikut ialah contoh data ringkas:

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

Salin selepas log masuk

2. Contoh kod

Berikut ialah contoh kod carta sunburst asas:

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

Salin selepas log masuk

Dalam kod di atas, kami menggunakan carta Objek menetapkan jenis carta kepada carta sunburst. Atribut data dalam siri ialah tatasusunan yang digunakan untuk menyimpan data carta sunburst. Setiap nod ditakrifkan menggunakan atribut name, value dan color. Dengan menetapkan atribut children, anda boleh menyusun perhubungan hierarki. chart对象设置图表类型为旭日图。series中的data属性是一个数组，用来存储旭日图的数据。每个节点都使用name、value和color属性来定义。通过设置children属性，可以嵌套表示层级关系。

三、图表属性和样式调整

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

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

Carta tinggi menyediakan banyak sifat dan kaedah untuk melaraskan gaya dan tingkah laku carta sunburst. Berikut ialah beberapa sifat biasa:

carta.polar: Nilai Boolean, digunakan untuk menentukan sama ada ia adalah carta kutub. Lalai ialah false.

carta.startAngle: Nombor, digunakan untuk menentukan sudut permulaan carta sunburst. Lalai ialah 0. 🎜🎜series.dataLabels.format: Rentetan, digunakan untuk menentukan format paparan label data. Menyokong ruang letak, seperti {point.node.name} untuk mewakili nama nod. 🎜🎜siri.peringkat: digunakan untuk mentakrifkan gaya pada tahap yang berbeza. Anda boleh menetapkan warna, jejari pengembangan, dsb. pada tahap yang berbeza. 🎜🎜🎜Untuk butiran lanjut tentang pelarasan atribut dan gaya, sila rujuk dokumentasi rasmi Highcharts. 🎜🎜4. Ringkasan🎜🎜Artikel ini memperkenalkan cara menggunakan carta sunburst untuk memaparkan data dalam Highcharts dan menyediakan contoh kod. Carta sunburst ialah carta visual yang sesuai untuk memaparkan hubungan hierarki dan hubungan berkadar, dan boleh digunakan untuk analisis dan pembentangan data. Dengan menetapkan format data yang sesuai dan melaraskan sifat berkaitan, kami boleh mencipta pelbagai gaya carta sunburst untuk memenuhi keperluan yang berbeza. Saya harap artikel ini akan membantu anda apabila membuat carta sunburst menggunakan Highcharts. 🎜

Atas ialah kandungan terperinci Cara menggunakan carta sunburst untuk memaparkan data dalam Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!