Cara menggunakan carta lajur dan baldi untuk memaparkan data dalam Highcharts

Cara menggunakan carta lajur dan baldi untuk memaparkan data dalam Carta Tinggi

Carta lajur dan baldi ialah jenis carta visualisasi data yang biasa digunakan dalam Carta Tinggi, yang boleh memaparkan secara visual kategori data yang berbeza dan membandingkan saiznya. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta lajur dan carta baldi serta memberikan contoh kod terperinci.

Pertama, kami perlu memperkenalkan perpustakaan Highcharts dan fail pergantungan yang berkaitan. Fail perpustakaan boleh dimuat turun dari laman web rasmi Highcharts (www.highcharts.com) dan diperkenalkan ke dalam fail HTML. Kami juga perlu memperkenalkan JQuery kerana perpustakaan Highcharts bergantung pada JQuery.

Seterusnya, kita perlu mencipta bekas HTML untuk memaparkan lajur dan carta baldi. Anda boleh menggunakan elemen div dan memberikannya atribut id unik, seperti yang ditunjukkan di bawah:

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

Kemudian, kita perlu menyediakan data untuk dipaparkan dalam carta lajur dan baldi. Data boleh statik atau dinamik diperolehi daripada pelayan. Di sini kita menganggap kita mempunyai data berikut:

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 }
];

Seterusnya, kita boleh menggunakan Highcharts untuk mencipta lajur dan carta tong. Pertama, kita perlu menentukan pilihan konfigurasi carta, termasuk jenis carta, tajuk, label paksi-X dan paksi-Y, dsb. Kami kemudiannya perlu menghantar data ke carta dan mencipta carta dengan pilihan konfigurasi carta sebagai parameter. Kod khusus adalah seperti berikut:

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '柱桶图'
    },
    xAxis: {
      categories: data.map(function(item) {
        return item.name;
      })
    },
    yAxis: {
      title: {
        text: '数值'
      }
    },
    series: [{
      name: '数值',
      data: data.map(function(item) {
        return item.value;
      })
    }]
  });
});

Dalam kod di atas, kami menggunakan kaedah carta Highcharts untuk membuat carta lajur dan baldi. Antaranya, atribut carta menentukan jenis carta sebagai lajur (carta bar), atribut tajuk menentukan tajuk carta sebagai "carta lajur dan baldi", atribut xAxis menentukan label paksi-X sebagai atribut nama dalam data, dan atribut yAxis menentukan label paksi-Y sebagai "nilai berangka". Atribut siri menentukan siri data carta, di mana atribut nama menentukan nama siri data sebagai "nilai", dan atribut data menentukan nilai khusus siri data sebagai atribut nilai dalam data.

Akhir sekali, kami menetapkan parameter pertama kaedah Highcharts.chart kepada id bekas HTML yang dibuat sebelum ini untuk memaparkan carta ke dalam bekas itu.

Selepas melengkapkan langkah di atas, kita boleh menjalankan kod dalam pelayar dan melihat lajur dan carta baldi dalam bekas HTML untuk memaparkan data.

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