Cara membuat boxplot menggunakan Highcharts

Cara mencipta boxplot menggunakan Highcharts

Highcharts ialah perpustakaan carta JavaScript yang popular yang boleh digunakan untuk mencipta pelbagai jenis carta, termasuk boxplot. Boxplot ialah carta yang digunakan untuk memaparkan taburan statistik bagi set data. Ia boleh memaparkan median, kuartil atas dan bawah, nilai minimum dan maksimum data, serta sebarang outlier.

Yang berikut akan memperkenalkan cara menggunakan perpustakaan Highcharts untuk membuat plot kotak dan menyediakan beberapa contoh kod khusus.

Langkah pertama, sediakan data
Pertama, kita perlu menyediakan data untuk dipaparkan dalam plot kotak. Data tersebut mestilah tatasusunan, setiap elemen boleh menjadi nombor atau tatasusunan yang mengandungi set nilai. Plot kotak selalunya digunakan untuk membandingkan taburan berbilang set data, jadi kami boleh menyediakan berbilang set data.

Sebagai contoh, kami mempunyai tiga set data iaitu A, B dan C. Data mereka adalah seperti berikut:

var dataSetA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 14, 16, 18, 20];
var dataSetC = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];

Langkah kedua, buat bekas carta

Seterusnya, kami Anda perlukan untuk mencipta bekas dalam halaman web untuk memaparkan plot kotak. Anda boleh menggunakan elemen div sebagai bekas dan memberikannya id unik.

Contohnya:

Langkah ketiga, konfigurasikan parameter carta

Sebelum mencipta plot kotak, kita perlu mentakrifkan pelbagai konfigurasi carta melalui parameter objek. Parameter ini termasuk jenis carta, tajuk, label paksi-x dan paksi-y, dsb.

Contohnya:

var chartOptions = {

carta: {

type: 'boxplot',
renderTo: 'container'

},

tajuk: {

text: 'Boxplot Example'

},

xAxis: {

categories: ['A', 'B', 'C'],
title: {
  text: 'Data Set'
}

},

title: {
  text: 'Value'
}

},

:

yAxis [ {

name: 'Data Set',
data: [dataSetA, dataSetB, dataSetC]

}]

};

Langkah 4, cipta carta

Akhir sekali, kita boleh menggunakan objek Carta dalam perpustakaan Highcharts untuk mencipta plot kotak. Carta boleh dibuat dengan menghantar parameter konfigurasi dan data kepada pembina objek Carta.

Sebagai contoh:

carta var = Carta Tinggi baharu.Carta(CartaPilihan);

Selepas melengkapkan langkah di atas, anda boleh melihat plot kotak yang menunjukkan set data A, B dan C pada halaman web.

Di atas adalah langkah asas dan contoh kod untuk membuat plot kotak menggunakan Highcharts. Anda boleh melaraskan dan mengoptimumkan lagi paparan carta mengikut keperluan anda sendiri. Pustaka Highcharts menyediakan banyak pilihan konfigurasi dan kaedah API untuk anda gunakan. Saya harap artikel ini membantu anda, dan saya ucapkan selamat maju jaya dalam mencipta boxplots dengan Highcharts!

Atas ialah kandungan terperinci Cara membuat boxplot menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!