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];

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.

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.

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]

};

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.

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