Cara membuat carta pokok segi empat tepat menggunakan Highcharts-tutorial js-php.cn

Cara membuat carta pokok segi empat tepat menggunakan Highcharts

WBOY

Lepaskan： 2023-12-18 08:25:22

asal

736 orang telah melayarinya

Cara membuat carta pokok segi empat tepat menggunakan Highcharts

Highcharts ialah perpustakaan carta JavaScript yang popular yang menyediakan pelbagai jenis carta untuk kita gunakan. Salah satunya ialah rajah pokok segi empat tepat, yang membolehkan kami memaparkan data hierarki secara visual. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta pokok segi empat tepat dan memberikan contoh kod khusus.

Langkah 1: Pasang dan perkenalkan Highcharts

Mula-mula, kami perlu memuat turun fail perpustakaan Highcharts dari tapak web rasmi Highcharts dan memperkenalkannya ke dalam projek kami. Ia boleh diperolehi melalui dua cara berikut:

Muat turun fail perpustakaan Highcharts dan masukkan ke dalam fail HTML
Pasang Highcharts melalui npm dan perkenalkan ke dalam projek

Berikut ialah contoh fail HTML yang memperkenalkan Kod perpustakaan Highcharts:

<!DOCTYPE html>
<html>
<head>
  <title>矩形树图表示例</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

Salin selepas log masuk

Langkah 2: Sediakan data

Sebelum mencipta carta pokok segi empat tepat, kita perlu menyediakan data hierarki. Format data carta pokok segi empat tepat ialah tatasusunan objek bersarang Setiap objek mengandungi atribut nama (nama nod) dan nilai (nilai nod), serta atribut kanak-kanak (susunan yang mengandungi nod anak). Berikut ialah sampel data:

var data = {
  name: '根节点',
  value: 10,
  children: [
    {
      name: '子节点1',
      value: 5,
      children: []
    },
    {
      name: '子节点2',
      value: 3,
      children: [
        {
          name: '子节点2.1',
          value: 2,
          children: []
        },
        {
          name: '子节点2.2',
          value: 1,
          children: []
        }
      ]
    },
    {
      name: '子节点3',
      value: 2,
      children: []
    }
  ]
};

Salin selepas log masuk

Langkah 3: Buat carta pokok segi empat tepat

Seterusnya, kita boleh menggunakan kaedah carta Highcharts untuk mencipta carta pokok segi empat tepat. Dalam kaedah carta, kita perlu menentukan jenis carta sebagai rectangularTree dan menetapkan atribut lain yang diperlukan, seperti tajuk, data, dsb. chart方法来创建矩形树图表。在chart方法中，我们需要指定图表的类型为rectangularTree，同时设置好其他必要的属性，如标题、数据等。

下面是一个创建矩形树图表的代码示例：

Highcharts.chart('container', {
  chart: {
    type: 'rectangularTree'
  },
  title: {
    text: '矩形树图表示例'
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    levelIsConstant: false,
    data: [data]
  }]
});

Salin selepas log masuk

在上面的代码中，我们指定了图表类型为rectangularTree，设置了标题为矩形树图表示例。接着，在series属性中定义了一个treemap系列，设置了布局算法为squarified，允许点击节点进行钻取，以及设置了数据为我们准备好的数据[data]

Berikut ialah contoh kod untuk mencipta carta pokok segi empat tepat:

rrreee

Dalam kod di atas, kami menentukan jenis carta sebagai rectangularTree dan menetapkan tajuk sebagai Contoh Carta Pokok Rectangular kod>. Seterusnya, siri <code>treemap ditakrifkan dalam atribut siri, algoritma reka letak ditetapkan kepada squarified, nod dibenarkan untuk diklik untuk penggerudian , dan Data [data] yang disediakan untuk kami.

Langkah 4: Pratonton dalam penyemak imbas

Akhir sekali, kami pratonton fail HTML dalam penyemak imbas dan anda boleh melihat carta pokok segi empat tepat yang dihasilkan. Carta secara automatik melukis segi empat tepat berdasarkan struktur hierarki data dan boleh dikembangkan dan diruntuhkan dengan mengklik pada nod. 🎜🎜Melalui langkah di atas, kami berjaya mencipta carta pokok segi empat tepat menggunakan Highcharts dan menunjukkan contoh kod tertentu. Anda boleh melaraskan algoritma reka letak, gaya dan atribut lain mengikut keperluan anda sendiri dan menjana carta pokok segi empat tepat yang anda inginkan berdasarkan data anda sendiri. Highcharts menyediakan pelbagai pilihan konfigurasi yang boleh membantu kami mencapai lebih banyak kesan tersuai. Saya harap artikel ini dapat membantu anda membuat carta pokok segi empat tepat menggunakan Highcharts! 🎜

Atas ialah kandungan terperinci Cara membuat carta pokok segi empat tepat menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!