Cara menggunakan carta gelembung untuk memaparkan data dalam Highcharts-tutorial js-php.cn

Cara menggunakan carta gelembung untuk memaparkan data dalam Highcharts

WBOY

Lepaskan： 2023-12-17 11:00:16

asal

1452 orang telah melayarinya

Cara menggunakan carta gelembung untuk memaparkan data dalam Highcharts

Bagaimana untuk menggunakan carta gelembung untuk memaparkan data dalam Highcharts?

Carta buih ialah carta visual yang menggunakan buih dengan saiz dan warna yang berbeza untuk mewakili berbilang dimensi data. Dalam pustaka Highcharts, anda boleh membuat dan menyesuaikan carta gelembung dengan mudah untuk memaparkan data, dan anda juga boleh menetapkan parameter dan gaya yang berbeza untuk meningkatkan kebolehbacaan dan visualisasi carta.

Yang berikut akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta gelembung mudah dan memberikan contoh kod khusus.

Langkah 1: Perkenalkan perpustakaan Highcharts
Pertama, anda perlu memperkenalkan fail JavaScript pustaka Highcharts ke dalam fail HTML. Ini boleh dicapai dengan menambahkan kod berikut di dalam teg

<script src="https://code.highcharts.com/highcharts.js"></script>

Salin selepas log masuk

Langkah 2: Buat bekas
Dalam fail HTML, buat elemen

dan ketinggian untuk memenuhi keperluan paparan. Sebagai contoh, anda boleh menggunakan kod berikut untuk membuat bekas dengan lebar 600px dan ketinggian 400px:

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

Salin selepas log masuk

Langkah 3: Tulis kod JavaScript
Dalam teg pada fail HTML, tulis kod JavaScript buat dan sesuaikan carta gelembung. Berikut ialah kod contoh mudah:

<script>
// 创建数据
var data = [
  { x: 10, y: 20, z: 30 },
  { x: 20, y: 30, z: 40 },
  { x: 30, y: 40, z: 50 },
  // 添加更多数据...
];

// 创建图表
Highcharts.chart('chartContainer', {
  chart: {
    type: 'bubble', // 指定图表类型为气泡图
    plotBorderWidth: 1,,
    zoomType: 'xy' // 启用XY轴的缩放功能
  },
  title: {
    text: '气泡图示例' // 设置标题
  },
  xAxis: {
    title: {
      text: 'X轴' // 设置X轴标题
    },
    // 添加更多X轴相关配置...
  },
  yAxis: {
    title: {
      text: 'Y轴' // 设置Y轴标题
    },
    // 添加更多Y轴相关配置...
  },
  plotOptions: {
    bubble: {
      // 设置气泡的最小和最大半径
      minSize: 10,
      maxSize: 50
    }
  },
  series: [{
    data: data // 将数据传递给series
  }]
});
</script>

Salin selepas log masuk

Dalam kod di atas, mula-mula tatasusunan dibuat yang mengandungi data. Setiap titik data mempunyai nilai x, y dan z, masing-masing mewakili paksi X, paksi Y dan saiz gelembung.

Kemudian, cipta carta melalui kaedah Highcharts.chart(). Dalam objek konfigurasi, tetapkan atribut carta kepada gelembung dan tentukan jenis carta kepada carta gelembung. Tetapkan atribut tajuk untuk menambah tajuk. Tetapkan sifat xAxis dan yAxis untuk mentakrifkan tajuk dan konfigurasi lain yang berkaitan bagi paksi-X dan paksi-Y.

Gunakan sifat plotOptions untuk menyesuaikan jejari minimum dan maksimum buih.

Akhir sekali, hantar data ke carta melalui atribut siri.

Langkah 4: Pratonton carta dalam penyemak imbas
Simpan fail HTML dan buka fail dalam penyemak imbas untuk pratonton carta gelembung yang dijana oleh Highcharts.

Melalui langkah di atas, anda boleh menggunakan carta gelembung untuk memaparkan data dalam Highcharts. Carta boleh disesuaikan lagi untuk memenuhi keperluan anda dengan menetapkan parameter dan gaya yang berbeza. Harap contoh mudah ini membantu anda.

Atas ialah kandungan terperinci Cara menggunakan carta gelembung untuk memaparkan data dalam Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!