ECharts histogram (mendatar): cara memaparkan kedudukan data
ECharts histogram (mendatar): Cara memaparkan kedudukan data, contoh kod khusus diperlukan
Dalam visualisasi data, histogram ialah jenis carta yang biasa digunakan, yang boleh memaparkan saiz dan hubungan relatif data secara visual. ECharts ialah alat visualisasi data yang sangat baik yang menyediakan pembangun dengan jenis carta yang kaya dan pilihan konfigurasi yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan histogram (mendatar) dalam ECharts untuk memaparkan kedudukan data dan memberikan contoh kod khusus.
Pertama, kita perlu menyediakan set data yang mengandungi data kedudukan. Katakan kita mempunyai set data pelajar yang mengandungi nama dan markah pelajar. Kami ingin menggunakan carta bar untuk memaparkan kedudukan skor pelajar. Berikut ialah contoh set data yang dipermudahkan:
var data = [
{ name: '小明', score: 92 },
{ name: '小红', score: 85 },
{ name: '小刚', score: 76 },
{ name: '小强', score: 80 },
{ name: '小花', score: 88 }
];Seterusnya, kita perlu memperkenalkan perpustakaan ECharts dan mencipta bekas untuk memaparkan histogram. Berikut ialah templat HTML asas:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> </body> </html>
Kemudian, kita boleh menggunakan API yang disediakan oleh ECharts untuk mengkonfigurasi dan melukis histogram. Berikut ialah contoh kod konfigurasi carta bar ringkas:
// 创建图表实例
var chart = echarts.init(document.getElementById('chart'));
// 配置图表选项
var option = {
title: {
text: '学生成绩排名'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: data.map(item => item.name)
},
series: [{
type: 'bar',
data: data.map(item => item.score),
label: {
show: true,
position: 'right',
formatter: '{c}'
}
}]
};
// 绘制图表
chart.setOption(option);Dalam kod di atas, kami mula-mula mencipta contoh carta dan mengikatnya pada bekas yang dinyatakan dalam HTML melalui kaedah echarts.init superior. Kami kemudiannya mengkonfigurasikan tajuk carta, paksi-x dan paksi-y, dengan data paksi-y datang daripada medan nama dalam set data sasaran kami. Akhir sekali, kami mengkonfigurasi siri histogram dan menentukan data histogram melalui atribut data, memaparkan label berangka melalui atribut label dan menetapkan kedudukan label ke sebelah kanan. echarts.init方法将其绑定到HTML中指定的容器上。然后，我们配置了图表的标题、x轴和y轴，其中y轴的数据来自于我们目标数据集中的姓名字段。最后，我们配置了柱状图系列，并通过data属性指定了柱状图的数据，通过label属性来显示数值标签，并将标签的位置设置为右侧。
最后，我们通过调用chart.setOption
cart.setOption. Selepas memuat semula halaman penyemak imbas, kita akan melihat kedudukan prestasi pelajar dipaparkan dalam bentuk carta bar Panjang bar menunjukkan saiz skor, dan label berangka dipaparkan di sebelah kanan bar. Ringkasnya, artikel ini memperkenalkan cara menggunakan histogram (mendatar) dalam ECharts untuk memaparkan kedudukan data dan menyediakan contoh kod khusus. Melalui kod sampel ini, pembangun boleh menggunakan ECharts secara fleksibel untuk memaparkan dan menganalisis data dalam projek sebenar untuk mencapai keperluan visualisasi data. 🎜Atas ialah kandungan terperinci ECharts histogram (mendatar): cara memaparkan kedudukan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara melaksanakan carta statistik data besar-besaran di bawah rangka kerja Vue
Aug 25, 2023 pm 04:20 PM
Cara melaksanakan carta statistik data besar-besaran di bawah rangka kerja Vue Pengenalan: Dalam beberapa tahun kebelakangan ini, analisis data dan visualisasi telah memainkan peranan yang semakin penting dalam semua lapisan masyarakat. Dalam pembangunan bahagian hadapan, carta ialah salah satu cara yang paling biasa dan intuitif untuk memaparkan data. Rangka kerja Vue ialah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna Ia menyediakan banyak alat dan perpustakaan yang berkuasa yang boleh membantu kami membina carta dan memaparkan data yang besar. Artikel ini akan memperkenalkan cara melaksanakan carta statistik data besar-besaran di bawah rangka kerja Vue dan lampirkan
Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python
Jul 31, 2023 pm 07:53 PM
Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python Pengenalan: Dengan kemunculan era data besar, visualisasi data telah menjadi penyelesaian penting. Dalam pembangunan aplikasi visualisasi data, gabungan Vue.js dan Python boleh memberikan fleksibiliti dan fungsi yang berkuasa. Artikel ini akan berkongsi beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python, dan melampirkan contoh kod yang sepadan. 1. Pengenalan kepada Vue.js Vue.js ialah JavaScript yang ringan
Bagaimana untuk menggunakan C++ untuk visualisasi data yang cekap?
Aug 25, 2023 pm 08:57 PM
Bagaimana untuk menggunakan C++ untuk visualisasi data yang cekap? Visualisasi data adalah untuk memaparkan data abstrak melalui cara visual seperti carta dan graf, menjadikannya lebih mudah untuk orang ramai memahami dan menganalisis data. Dalam era data besar, visualisasi data telah menjadi kemahiran penting untuk pekerja dalam pelbagai industri. Walaupun banyak alat visualisasi data yang biasa digunakan terutamanya dibangunkan berdasarkan bahasa skrip seperti Python dan R, C++, sebagai bahasa pengaturcaraan yang berkuasa, mempunyai kecekapan operasi yang tinggi dan pengurusan memori yang fleksibel, yang juga memainkan peranan penting dalam visualisasi data. Artikel ini akan
Cara menggunakan Layui untuk melaksanakan fungsi papan pemuka visualisasi data drag-and-drop
Oct 26, 2023 am 11:27 AM
Cara menggunakan Layui untuk melaksanakan fungsi papan pemuka visualisasi data drag-and-drop Pengenalan: Visualisasi data semakin digunakan dalam kehidupan moden, dan pembangunan papan pemuka adalah bahagian penting daripadanya. Artikel ini terutamanya memperkenalkan cara menggunakan rangka kerja Layui untuk melaksanakan fungsi papan pemuka visualisasi data seret dan lepas, membolehkan pengguna menyesuaikan modul paparan data mereka sendiri secara fleksibel. 1. Persediaan untuk memuat turun rangka kerja Layui Pertama, kita perlu memuat turun dan mengkonfigurasi rangka kerja Layui. Anda boleh memuat turunnya di laman web rasmi Layui (https://www
ECharts histogram (mendatar): cara memaparkan kedudukan data
Dec 17, 2023 pm 01:54 PM
Histogram ECharts (mendatar): Cara memaparkan kedudukan data memerlukan contoh kod khusus Dalam visualisasi data, histogram ialah jenis carta yang biasa digunakan, yang boleh memaparkan saiz dan hubungan relatif data secara visual. ECharts ialah alat visualisasi data yang sangat baik yang menyediakan pembangun dengan jenis carta yang kaya dan pilihan konfigurasi yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan histogram (mendatar) dalam ECharts untuk memaparkan kedudukan data dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan data yang mengandungi data kedudukan
Tutorial Graphviz: Cipta Visualisasi Data Intuitif
Apr 07, 2024 pm 10:00 PM
Graphviz ialah kit alat sumber terbuka yang boleh digunakan untuk melukis carta dan graf Ia menggunakan bahasa DOT untuk menentukan struktur carta. Selepas memasang Graphviz, anda boleh menggunakan bahasa DOT untuk mencipta carta, seperti melukis graf pengetahuan. Selepas anda menjana graf anda, anda boleh menggunakan ciri hebat Graphviz untuk menggambarkan data anda dan meningkatkan kefahamannya.
Mula Pantas: Gunakan fungsi bahasa Go untuk melaksanakan fungsi visualisasi data mudah
Aug 02, 2023 pm 04:25 PM
Permulaan Pantas: Gunakan fungsi bahasa Go untuk melaksanakan fungsi visualisasi data yang mudah Dengan pertumbuhan pesat dan kerumitan data, visualisasi data telah menjadi cara penting dalam analisis data dan ekspresi data. Dalam visualisasi data, kita perlu menggunakan alat dan teknik yang sesuai untuk mengubah data menjadi carta atau graf yang boleh dibaca dan difahami. Sebagai bahasa pengaturcaraan yang cekap dan mudah digunakan, bahasa Go juga digunakan secara meluas dalam bidang sains data. Artikel ini akan memperkenalkan cara menggunakan fungsi bahasa Go untuk melaksanakan fungsi visualisasi data mudah. Kami akan menggunakan Go
Teknologi visualisasi struktur data PHP
May 07, 2024 pm 06:06 PM
Terdapat tiga teknologi utama untuk menggambarkan struktur data dalam PHP: Graphviz: alat sumber terbuka yang boleh mencipta perwakilan grafik seperti carta, graf akiklik terarah dan pepohon keputusan. D3.js: Pustaka JavaScript untuk mencipta visualisasi dipacu data interaktif, menjana HTML dan data daripada PHP, dan kemudian menggambarkannya pada sisi klien menggunakan D3.js. ASCIIFlow: Perpustakaan untuk mencipta perwakilan teks rajah aliran data, sesuai untuk visualisasi proses dan algoritma.
