hujung hadapan web
tutorial js
Cara menggunakan carta bar untuk memaparkan data dalam Highcharts
Cara menggunakan carta bar untuk memaparkan data dalam Highcharts
Cara menggunakan carta bar untuk memaparkan data dalam Highcharts
Highcharts ialah perpustakaan visualisasi data yang berkuasa, fleksibel dan mudah digunakan yang boleh digunakan untuk mencipta pelbagai carta interaktif pada halaman web. Antaranya, carta bar ialah bentuk paparan data biasa yang boleh membandingkan dengan jelas saiz data dalam kategori yang berbeza. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta bar dan memberikan contoh kod khusus.
Langkah 1: Sediakan fail HTML
Pertama, anda perlu memperkenalkan fail perpustakaan Highcharts ke dalam fail HTML. Highcharts boleh diperkenalkan dengan memuat turun atau terus menggunakan CDN. Berikut ialah kod struktur asas fail HTML ringkas:
<!DOCTYPE html> <html> <head> <title>使用条形图展示数据</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container"></div> <script src="app.js"></script> </body> </html>
Langkah 2: Tulis kod JavaScript
Seterusnya, anda perlu menulis kod JavaScript untuk menentukan konfigurasi dan data carta bar. Cipta fail bernama app.js dan tulis kod berikut di dalamnya:
// 定义数据
var data = [
{
name: '类别一',
value: 10
},
{
name: '类别二',
value: 20
},
{
name: '类别三',
value: 30
}
];
// 创建条形图的配置
var options = {
chart: {
type: 'column'
},
title: {
text: '条形图示例'
},
xAxis: {
categories: data.map(item => item.name)
},
yAxis: {
title: {
text: '数值'
}
},
series: [{
name: '数据',
data: data.map(item => item.value)
}]
};
// 创建条形图
Highcharts.chart('container', options);Dalam kod di atas, mula-mula tatasusunan yang mengandungi data ditentukan. Setiap keping data mengandungi nama dan nilai. Kemudian, objek konfigurasi bernama pilihan dicipta, yang menentukan pelbagai sifat carta bar, seperti jenis carta, tajuk, paksi-x dan paksi-y, dsb. Akhir sekali, gunakan kaedah Highcharts.chart untuk memaparkan carta dalam elemen div dengan bekas id.
Langkah 3: Jalankan fail HTML
Selepas melengkapkan persediaan dalam dua langkah pertama, jalankan fail HTML dalam penyemak imbas untuk melihat kesan paparan carta bar. Carta akan dipaparkan berdasarkan data yang kami takrifkan dalam kod JavaScript.
Ringkasan:
Artikel ini memperkenalkan cara menggunakan Highcharts untuk mencipta carta bar dan menyediakan contoh kod khusus. Dalam aplikasi praktikal, kod di atas boleh digunakan sebagai asas dan diubah suai serta dikembangkan mengikut keperluan sebenar. Fungsi berkuasa Highcharts dan pilihan konfigurasi fleksibel membolehkan kami mencipta pelbagai carta yang cantik dengan mudah untuk memaparkan dan menganalisis data.
Atas ialah kandungan terperinci Cara menggunakan carta bar untuk memaparkan data dalam Highcharts. 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
Cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata
Dec 17, 2023 pm 06:57 PM
Cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata Dengan kemunculan era data besar, paparan data masa nyata menjadi semakin penting. Highcharts, sebagai perpustakaan carta yang popular, menyediakan fungsi yang kaya dan kebolehsesuaian, membolehkan kami memaparkan data masa nyata secara fleksibel. Artikel ini akan memperkenalkan cara menggunakan data dinamik dalam Highcharts untuk memaparkan data masa nyata dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan sumber data yang boleh menyediakan data masa nyata. Dalam artikel ini, saya
Cara menggunakan carta Sankey untuk memaparkan data dalam Highcharts
Dec 17, 2023 pm 04:41 PM
Cara menggunakan rajah Sankey untuk memaparkan data dalam rajah Sankey Highcharts (SankeyDiagram) ialah jenis carta yang digunakan untuk menggambarkan proses yang kompleks seperti aliran, tenaga dan dana. Ia boleh memaparkan dengan jelas perhubungan dan aliran antara pelbagai nod, dan boleh membantu kami memahami dan menganalisis data dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Highcharts untuk mencipta dan menyesuaikan carta Sankey, dengan contoh kod khusus. Pertama, kita perlu memuatkan perpustakaan Highcharts dan Sank
Cara menggunakan carta bertindan untuk memaparkan data dalam Highcharts
Dec 18, 2023 pm 05:56 PM
Cara menggunakan carta bertindan untuk memaparkan data dalam Carta Tinggi Carta bertindan ialah cara biasa untuk menggambarkan data, yang boleh memaparkan jumlah berbilang siri data pada masa yang sama dan memaparkan sumbangan setiap siri data dalam bentuk carta bar. 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 menyediakan
Cara membuat carta Gantt menggunakan Highcharts
Dec 17, 2023 pm 07:23 PM
Cara menggunakan Highcharts untuk mencipta carta Gantt memerlukan contoh kod khusus Pengenalan: Carta Gantt ialah bentuk carta yang biasa digunakan untuk memaparkan kemajuan projek dan pengurusan masa secara visual boleh memaparkan masa mula, masa tamat dan kemajuan tugas. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan jenis carta kaya dan pilihan konfigurasi yang fleksibel. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta Gantt dan memberikan contoh kod khusus. 1. Carta tinggi
Cara membuat peta haba peta menggunakan Highcharts
Dec 17, 2023 pm 04:06 PM
Cara menggunakan Highcharts untuk mencipta peta haba peta memerlukan contoh kod khusus Peta haba ialah kaedah paparan data visual yang boleh mewakili pengedaran data dalam setiap kawasan melalui lorek warna yang berbeza. Dalam bidang visualisasi data, Highcharts ialah perpustakaan JavaScript yang sangat popular yang menyediakan jenis carta yang kaya dan fungsi interaktif. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta peta haba peta dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan beberapa data
Cara membuat carta tersuai dengan Highcharts
Dec 17, 2023 pm 10:39 PM
Cara membuat carta tersuai dengan Highcharts Highcharts ialah perpustakaan carta JavaScript yang berkuasa dan mudah digunakan yang membantu pembangun mencipta pelbagai jenis carta interaktif dan boleh disesuaikan. Untuk mencipta carta tersuai menggunakan Highcharts, kita perlu menguasai beberapa konsep dan teknik asas. Artikel ini menerangkan beberapa langkah penting dan menyediakan contoh kod khusus. Langkah 1: Perkenalkan perpustakaan Highcharts Pertama, kita perlu
Cara menggunakan Vue untuk melaksanakan carta statistik untuk paparan data skrin besar
Aug 17, 2023 am 09:54 AM
Cara menggunakan Vue untuk melaksanakan carta statistik untuk paparan data skrin besar Dalam masyarakat maklumat moden, statistik dan visualisasi data telah menjadi cara penting untuk membuat keputusan dan analisis. Untuk memaparkan data dengan lebih intuitif, kami sering menggunakan carta statistik. Di bawah rangka kerja Vue, anda boleh mencapai keperluan paparan data skrin besar dengan mudah dengan menggunakan beberapa perpustakaan carta yang sangat baik. Artikel ini akan memperkenalkan cara menggunakan Vue digabungkan dengan dua perpustakaan carta statistik arus perdana, echarts dan chart.js, untuk memaparkan data. Pertama, kita perlu memasang echarts dan c untuk projek Vue
Cara menggunakan histogram untuk memaparkan data dalam ECharts
Dec 18, 2023 pm 02:21 PM
Cara menggunakan histogram untuk memaparkan data dalam ECharts ECharts ialah perpustakaan visualisasi data berasaskan JavaScript yang sangat popular dan digunakan secara meluas dalam bidang visualisasi data. Antaranya, histogram ialah jenis carta yang paling biasa dan biasa digunakan, yang boleh digunakan untuk memaparkan saiz, perbandingan dan analisis trend pelbagai data berangka. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk melukis histogram dan memberikan contoh kod. Pertama, kita perlu memperkenalkan perpustakaan ECharts ke dalam fail HTML, yang boleh diperkenalkan dengan cara berikut
