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

Cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts

WBOY

Lepaskan： 2023-12-18 17:56:46

asal

687 orang telah melayarinya

Cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts

Carta bertindan ialah cara biasa visualisasi data, yang boleh memaparkan jumlah berbilang siri data pada masa yang sama dan memaparkan jumlah setiap siri data dalam bentuk carta palang menyumbang. Highcharts ialah perpustakaan JavaScript berkuasa yang menyediakan pelbagai jenis carta dan pilihan konfigurasi yang fleksibel untuk memenuhi pelbagai keperluan visualisasi data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta bertindan dan memberikan contoh kod yang sepadan.

Pertama, kita perlu memperkenalkan fail perpustakaan Highcharts. Tambahkan kod berikut dalam teg

pada halaman HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>

Salin selepas log masuk

Kemudian, buat bekas di dalam teg Anda boleh menggunakan elemen

dan memberikannya ID unik, seperti "bekas carta". Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Seterusnya, kita boleh menggunakan kod JavaScript untuk mengkonfigurasi dan membuat carta. Untuk mencipta carta bertindan, kita perlu menggunakan sifat Penimbunan Highcharts dan menetapkannya kepada "biasa". Pada masa yang sama, kita juga perlu menentukan nama siri data, data dan kaedah susun. Kodnya adalah seperti berikut:

Highcharts.chart('chart-container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '堆叠图表示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '系列一',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '系列二',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '系列三',
        data: [3, 4, 4, 2, 5]
    }]
});

Salin selepas log masuk

Dalam kod di atas, kami mencipta carta bar (jenis: 'bar') dan menetapkan tajuk kepada "Contoh Carta Bertindan". Kategori pada paksi-x ialah bulan, dan paksi-y mewakili nilai berangka. Atribut terbalik bagi legenda ditetapkan kepada benar supaya siri data dipaparkan dalam susunan bertindan. Atribut tindanan dalam plotOptions ditetapkan kepada 'normal', yang bermaksud bahawa siri data dipaparkan dalam cara bertindan. Akhir sekali, kami menentukan tiga siri data melalui atribut siri, termasuk nama dan data yang sepadan.

Akhir sekali, kami hanya perlu meletakkan kod JavaScript ini dalam halaman untuk memastikan carta bertindan dipaparkan apabila halaman dimuatkan. Setelah selesai, kami akan mempunyai halaman dengan carta bertindan yang memaparkan secara visual jumlah dan sumbangan individu bagi berbilang siri data.

Di atas ialah kaedah dan contoh kod khusus tentang cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts. Dengan konfigurasi dan pengekodan yang ringkas, kami boleh mencipta carta bertindan yang menarik dan mudah difahami dengan mudah untuk memaparkan dan menganalisis data dengan lebih baik serta membantu kami membuat keputusan yang lebih termaklum.

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