Rumah > Artikel > hujung hadapan web > Cara membuat peta haba peta menggunakan Highcharts
Cara membuat peta haba peta menggunakan Highcharts
- 王林asal
- 2023-12-17 16:06:311216semak imbas
Cara menggunakan Highcharts untuk mencipta peta haba peta, contoh kod khusus diperlukan
Peta haba ialah kaedah paparan data visual yang boleh mewakili pengedaran data 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. Katakan kita mempunyai set data yang mengandungi bandar yang berbeza dan populasi yang sepadan. Format data adalah serupa dengan:
var data = [ ['北京', 21536], ['上海', 24150], ['广州', 13278], ... ];
Seterusnya, kami akan membuat halaman HTML kosong dan menambah rujukan kepada Highcharts. Anda boleh memuat turun fail perpustakaan Highcharts dan memperkenalkannya ke dalam halaman HTML, atau anda boleh menggunakan kaedah rujukan dalam talian. Tambahkan kod berikut pada halaman HTML:
<!DOCTYPE html> <html> <head> <title>地图热力图示例</title> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script> </head> <body> <div id="container" style="width: 800px; height: 600px;"></div> <script src="path/to/your/script.js"></script> </body> </html>
Ambil perhatian bahawa dalam contoh ini kami memperkenalkan modul peta Highcharts dan data peta China.
Seterusnya, kita perlu menulis logik untuk melukis peta haba peta dalam kod JavaScript. Tambahkan kod berikut pada fail path/to/your/script.js:
Highcharts.mapChart('container', {
title: {
text: '中国城市人口分布热力图'
},
subtitle: {
text: '数据来源: 维基百科'
},
series: [{
type: 'map',
mapData: Highcharts.maps['cn/all-sar-taiwan'],
data: data,
name: '人口',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});Dalam kod ini, kami menggunakan fungsi Highcharts.mapChart untuk mencipta carta peta dan menetapkan tajuk, sari kata, dan Data dsb.
Akhir sekali, kita hanya perlu membuka halaman HTML dalam pelayar untuk melihat peta haba peta yang dilukis.
Untuk meringkaskan, langkah-langkah untuk membuat peta haba peta menggunakan Highcharts adalah seperti berikut:
- Sediakan data.
- Buat halaman HTML dan perkenalkan fail perpustakaan Highcharts.
- Tulis kod JavaScript untuk melukis peta haba peta.
- Buka halaman HTML dalam penyemak imbas anda untuk melihat hasilnya.
Saya harap artikel ini akan membantu anda memahami cara menggunakan Highcharts untuk mencipta peta haba peta. Jika anda ingin mengetahui lebih lanjut tentang penggunaan Highcharts, anda boleh merujuk kepada dokumentasi rasmi Highcharts atau sumber lain yang berkaitan.
Atas ialah kandungan terperinci Cara membuat peta haba peta menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!