Cara menggunakan carta garis mendatar untuk memaparkan data dalam Highcharts

Highcharts ialah perpustakaan carta JavaScript yang sangat popular yang menyokong berbilang jenis carta untuk memaparkan data. Antaranya, carta garisan mendatar ialah jenis carta yang biasa digunakan untuk memaparkan kedudukan mendatar sesuatu nilai dalam data.

Artikel ini akan memperkenalkan cara menggunakan carta garis mendatar dalam Highcharts untuk memaparkan data dan memberikan contoh kod khusus. Berikut adalah langkah-langkahnya:

Langkah 1: Sediakan data

Mula-mula anda perlu menyediakan data, seperti data berikut:

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

Dalam data di atas, nama mewakili nama garis mendatar, dan nilai mewakili nilai garis mendatar. Di sini kami menggunakan 5 jenis garisan mendatar, yang boleh ditambah atau dikurangkan mengikut keperluan.

Langkah 2: Buat bekas

Buat bekas HTML untuk meletakkan carta Highcharts. Contohnya:

<div id="container"></div>

Langkah 3: Perkenalkan perpustakaan Highcharts

Perkenalkan perpustakaan Highcharts ke dalam halaman HTML. Contohnya:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

Langkah 4: Tulis konfigurasi Highcharts

Tulis konfigurasi Highcharts dalam fail JavaScript, termasuk tajuk, data, paksi-x, paksi-y, dsb. carta garis mendatar. Jenis carta garisan mendatar ialah xrange. Kod konfigurasi khusus adalah seperti berikut:

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

Dalam konfigurasi di atas, jenis carta ialah xrange, yang bermaksud menjana carta garis mendatar. tajuk mewakili tajuk carta, xAxis mewakili paksi-x dan hanya terdapat satu item "Nilai" dalam kategori kerana hanya terdapat satu paksi-x dalam carta garis mendatar. yAxis mewakili paksi-y, terbalik mewakili membalikkan paksi-y supaya nilai tertinggi berada di bahagian atas maxPadding mewakili bahagian ruang yang ditinggalkan di atas dan di bawah paksi-y, dan min dan max mewakili nilai minimum dan maksimum ​daripada paksi-y. legenda mewakili legenda, yang tidak diperlukan di sini, jadi ia ditetapkan kepada palsu. siri mewakili siri data, di mana nama ialah nama siri data, data ialah data, sempadanRadius mewakili jejari isi sempadan, borderColor mewakili warna sempadan, borderWidth mewakili lebar sempadan, dan pointWidth mewakili lebar garisan mendatar.

Langkah 5: Paparkan carta

Akhir sekali, panggil konfigurasi Highcharts dalam halaman HTML dan paparkan carta dalam bekas.

Highcharts.chart('container', options);

Kod lengkap adalah seperti berikut:

    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


    <div id="container"></div>

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

Di atas adalah semua langkah untuk menggunakan carta garis mendatar dalam Highcharts untuk memaparkan data. Semoga ia membantu semua orang.

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