Cara membuat peta haba menggunakan Highcharts

Highcharts ialah perpustakaan carta JavaScript yang sangat popular yang boleh digunakan untuk mencipta pelbagai jenis carta, termasuk peta haba. Peta haba ialah sejenis carta yang mewakili ketumpatan data dan digunakan secara meluas dalam visualisasi data. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk membuat peta haba dan memberikan contoh kod khusus.

1. Sediakan data

Pertama, kita perlu menyediakan beberapa data untuk mencipta peta haba. Peta haba adalah berdasarkan data dua dimensi, di mana setiap titik data mempunyai koordinat X dan Y, dan nilai yang mewakili ketumpatan titik tersebut. Data biasanya disediakan dalam format JSON, seperti:

var data = [
  [0, 0, 10],
  [0, 1, 19],
  [0, 2, 8],
  [0, 3, 24],
  [0, 4, 67],
  ...
];

di mana lajur pertama mewakili koordinat paksi-X, lajur kedua mewakili koordinat paksi-Y dan lajur ketiga mewakili nilai ketumpatan.

Kita juga perlu menentukan label untuk paksi-X dan paksi-Y, serta tajuk peta haba.

2. Cipta Bekas Carta

Seterusnya, kita perlu mencipta bekas dalam dokumen HTML untuk meletakkan peta haba kita. Ini boleh dilakukan menggunakan elemen div:

<div id="container"></div>

3. Memperkenalkan perpustakaan Highcharts

Kita perlu memperkenalkan perpustakaan Highcharts ke dalam dokumen HTML, yang boleh dicapai dengan cara berikut:

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

Jika kita ingin menggunakan Modul peta haba untuk mencipta peta haba, kami juga perlu Memperkenalkan modul Peta Haba:

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

4. Mengkonfigurasi pilihan carta

Seterusnya, kami perlu mengkonfigurasi pilihan dalam objek Highcharts untuk memberitahunya cara untuk memaparkan peta haba kami. Pilihan ini ditakrifkan sebagai objek JavaScript yang dipanggil "objek pilihan". Berikut ialah objek pilihan asas:

var options = {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  title: {
    text: 'My Heatmap'
  },
  xAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'X Axis'
    }
  },
  yAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'Y Axis'
    }
  },
  colorAxis: {
    min: 0,
    max: 100,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: 'My Data',
    borderWidth: 1,
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};

Beberapa pilihan utama dalam objek pilihan di atas dijelaskan di bawah:

• carta: Pilihan ini memberitahu Highcharts bahawa kami ingin mencipta peta haba dan menentukan lebar sempadan dan margin peta haba .
• tajuk: Pilihan ini menentukan tajuk peta haba.
• xAxis dan yAxis: Pilihan ini mentakrifkan label untuk paksi X dan paksi Y.
• colorAxis: Pilihan ini mentakrifkan julat dan warna paksi warna.
• siri: Pilihan ini mentakrifkan data untuk peta haba.

5. Buat Carta

Kini, kita boleh menggunakan kaedah carta() dalam objek Highcharts untuk mencipta peta haba. Kaedah ini memerlukan dua parameter: ID bekas dan objek pilihan. Berikut ialah contoh kod:

var chart = Highcharts.chart('container', options);

6. Melukis peta haba

Akhir sekali, kita perlu memanggil kaedah redraw() bagi objek carta untuk melukis peta haba, seperti yang ditunjukkan di bawah:

chart.redraw();

Pada ketika ini, kami telah selesai membuat menggunakan proses Peta Haba Highcharts.

Kod contoh lengkap adalah seperti berikut:

<div id="container"></div>

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

<script>
  var data = [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    ...
  ];

  var options = {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    title: {
      text: 'My Heatmap'
    },
    xAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'X Axis'
      }
    },
    yAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'Y Axis'
      }
    },
    colorAxis: {
      min: 0,
      max: 100,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
      name: 'My Data',
      borderWidth: 1,
      data: data,
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  };

  var chart = Highcharts.chart('container', options);
  chart.redraw();
</script>

Atas ialah kandungan terperinci Cara membuat peta haba menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!