Rumah > Artikel > hujung hadapan web > Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts
Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts
Pengenalan:
Analisis dan visualisasi data adalah aspek yang sangat penting dalam sains data moden. Semasa proses analisis data, kita selalunya perlu memvisualisasikan pengagihan data untuk lebih memahami ciri dan arah aliran data. Boxplot ialah kaedah visualisasi yang biasa digunakan yang boleh memaparkan maklumat penting seperti ciri statistik dan outlier data dengan jelas. Artikel ini akan memperkenalkan cara menggunakan plot kotak dan kumis untuk memaparkan pengedaran data dalam ECharts dan memberikan contoh kod khusus.
1. Pengenalan kepada ECharts:
ECharts ialah perpustakaan visualisasi data sumber terbuka yang dibangunkan oleh Baidu dan ditulis dalam JavaScript. ECharts menyediakan pelbagai jenis carta dan fungsi interaktif, yang boleh merealisasikan pelbagai keperluan visualisasi data dengan mudah. Dalam artikel ini, kami akan menggunakan ECharts untuk melukis plot kotak dan misai.
2. Penyediaan data:
Sebelum memaparkan pengedaran data, kita perlu menyediakan satu set data. Berikut adalah data sampel, dengan jumlah 100 titik sampel:
var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 160, 170, 180, 190, 200, 250, 260, 270, 280, 300, 320, 340, 360, 380, 400, 450, 460, 470, 480, 500, 520, 540, 560, 580, 600, 650, 660, 670, 680, 700, 720, 740, 760, 780, 800, 850, 860, 870, 880, 900, 920, 940, 960, 980, 1000, 1050, 1060, 1070, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1250, 1260, 1270, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1450, 1460, 1470, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1650, 1660, 1670, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1850, 1860, 1870, 1880];
3. Lukis plot kotak dan whisker:
Untuk melukis plot kotak dan whisker, kita perlu menggunakan siri boxplot ECharts. Berikut ialah kod sampel untuk item konfigurasi ECharts:
var option = { dataset: [{ dimensions: ['value'], source: data }], grid: { left: '10%', right: '10%', top: '15%', bottom: '10%' }, xAxis: [{ type: 'category', boundaryGap: true, data: [''] }], yAxis: [{ type: 'value', min: 0, max: 2000, axisLabel: { formatter: '{value}' } }], series: [{ type: 'boxplot', tooltip: { formatter: function (params) { return [ '最大值:' + params.data[5], '上四分位数:' + params.data[4], '中位数:' + params.data[3], '下四分位数:' + params.data[2], '最小值:' + params.data[1] ].join('<br/>'); } } }] }; var myChart = echarts.init(document.getElementById('boxplot')); myChart.setOption(option);
Tatasusunan data
dalam kod di atas ialah data sampel yang kami sediakan sebelum ini. Dengan mengisi source
dengan data, kami boleh menghantar data ke carta untuk diplot. data
数组是我们之前准备好的样本数据。通过将数据填充到source
中,我们可以将数据传递给图表进行绘制。
配置项中的xAxis
和yAxis
分别用于设置X轴和Y轴的样式和范围。可以根据实际需求进行调整。
series
中的type
设为'boxplot',表示我们要绘制的是箱型图。tooltip
函数用于设置鼠标悬停时的提示信息。
最后,我们使用echarts.init
yAxis
dalam item konfigurasi digunakan untuk menetapkan gaya dan julat paksi-X dan paksi-Y masing-masing. Ia boleh diselaraskan mengikut keperluan sebenar.
Tetapkan type
dalam siri
kepada 'boxplot', yang bermaksud kita mahu melukis plot kotak. Fungsi tooltip
digunakan untuk menetapkan maklumat gesaan apabila tetikus melayang.
Akhir sekali, kami menggunakan echarts.init
untuk memulakan carta dan mengaitkan carta dengan bekas halaman HTML yang ditentukan.
Melalui item konfigurasi dan kod di atas, kita boleh melukis kotak dan carta misai dalam ECharts. Membenamkan carta ke dalam halaman web HTML boleh menunjukkan pengedaran data yang kami sediakan.
Atas ialah kandungan terperinci Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!