Cara menggunakan carta gabungan untuk memaparkan data dalam Highcharts

Cara menggunakan carta gabungan untuk memaparkan data dalam Highcharts memerlukan contoh kod khusus

Dengan populariti visualisasi data dalam semua lapisan masyarakat, lebih ramai orang mula menggunakan Highcharts, perpustakaan carta JavaScript yang berkuasa, untuk memaparkan data. Dalam aplikasi praktikal, selalunya perlu untuk memaparkan perubahan arah aliran berbilang penunjuk, yang memerlukan penggunaan fungsi carta gabungan.

Highcharts menyediakan fungsi carta gabungan yang berkuasa yang boleh menggabungkan pelbagai jenis carta bersama-sama untuk menyampaikan maksud data dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan carta gabungan untuk memaparkan data dalam Highcharts dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta carta dengan beberapa siri yang berbeza. Sebagai contoh, kami ingin menunjukkan aliran jualan dan keuntungan dalam satu tempoh masa. Pertama, kita boleh mencipta carta garis asas untuk menunjukkan perubahan dalam jualan:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        title: {
            text: '金额'
        }
    },
    series: [{
        name: '销售额',
        data: [100, 200, 300, 400, 500, 600, 700]
    }]
});

Seterusnya, kita boleh mencipta carta bar untuk menunjukkan perubahan dalam keuntungan:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }]
});

Dalam kod di atas, kami menggunakan yAxis untuk mentakrifkan Dua paksi-y sepadan dengan jualan dan keuntungan masing-masing. Data keuntungan dipaparkan menggunakan siri jenis lajur, dan parameter yAxis ditentukan sebagai 1, yang bermaksud paksi-y kedua digunakan.

Selain carta garisan dan carta bar, Highcharts juga menyokong jenis carta lain, seperti carta kawasan, carta pai, dsb. Kita boleh memilih jenis carta yang berbeza mengikut keperluan kita dan memaparkannya bersama-sama.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }, {
        name: '利润率',
        type: 'area',
        data: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35],
        yAxis: 1
    }, {
        name: '产品销量',
        type: 'pie',
        data: [{
            name: '产品A',
            y: 10
        }, {
            name: '产品B',
            y: 30
        }, {
            name: '产品C',
            y: 50
        }]
    }]
});

Dalam kod di atas, kami menambahkan carta kawasan (siri.jenis ialah kawasan) dan carta pai (siri.jenis ialah pai). Menggabungkan pelbagai jenis carta melalui siri yang berbeza boleh memaparkan data dengan lebih komprehensif.

Ringkasnya, melalui fungsi carta gabungan perpustakaan Highcharts, kami boleh mencampur dan memaparkan pelbagai jenis carta bersama-sama untuk menyampaikan maksud data dengan lebih baik. Anda hanya perlu memilih jenis carta yang berbeza mengikut keperluan anda dan menambah maklumat konfigurasi mereka pada siri. Saya harap artikel ini dapat membantu anda memahami cara menggunakan carta gabungan untuk memaparkan data dalam Highcharts.

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