Cara membuat carta piramid menggunakan Highcharts-tutorial js-php.cn

Cara membuat carta piramid menggunakan Highcharts

王林

Lepaskan： 2023-12-17 22:18:46

asal

1290 orang telah melayarinya

Cara membuat carta piramid menggunakan Highcharts

Cara menggunakan Highcharts untuk mencipta carta piramid

Pengenalan:
Carta piramid ialah alat visualisasi yang digunakan untuk memaparkan hubungan hierarki, yang boleh mempersembahkan secara visual taburan dan hubungan berkadar data. Dalam analisis data dan sokongan keputusan, carta piramid sering digunakan untuk mewakili perkadaran tahap yang berbeza atau pengagihan kumpulan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan perpustakaan Highcharts untuk mencipta carta piramid dan memberikan contoh kod terperinci.

Langkah 1: Perkenalkan perpustakaan Highcharts
Pertama, kita perlu memperkenalkan fail perpustakaan Highcharts ke dalam HTML. Ini boleh dilakukan dengan menambahkan kod berikut dalam teg

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

Salin selepas log masuk

Langkah 2: Cipta Bekas
Dalam HTML, kita perlu mencipta elemen bekas untuk memaparkan carta piramid. Elemen

boleh dibuat dengan menambahkan kod berikut:

<div id="container" style="width: 500px; height: 400px;"></div>

Salin selepas log masuk

Langkah 3: Tentukan data
Dalam JavaScript, kita perlu menentukan data yang diperlukan untuk carta piramid. Secara khusus, kita perlu menentukan nama dan nilai data. Data boleh ditakrifkan dengan kod berikut:

var data = [
  {
    name: '第一层级',
    value: 30
  },
  {
    name: '第二层级',
    value: 50
  },
  {
    name: '第三层级',
    value: 70
  }
];

Salin selepas log masuk

Langkah 4: Cipta Carta Piramid
Dalam JavaScript, kita boleh menggunakan Highcharts untuk mencipta carta piramid. Mula-mula, kita perlu mencipta objek carta asas melalui kaedah Highcharts.chart() dan nyatakan ID elemen kontena. Kemudian, kita boleh menetapkan item konfigurasi carta melalui atribut pilihan. Carta piramid boleh dibuat melalui kod berikut:

Highcharts.chart('container', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '金字塔图表示例'
  },
  series: [{
    name: '金字塔图',
    data: data
  }]
});

Salin selepas log masuk

Langkah 5: Tetapkan gaya dan kesan interaktif carta piramid
Gaya dan kesan interaktif carta piramid boleh diubah dengan menetapkan item konfigurasi carta. Berikut ialah beberapa contoh item konfigurasi yang biasa digunakan:

title: {
  text: '金字塔图表示例',
  style: {
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold'
  }
},
plotOptions: {
  pyramid: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y}%',
      color: '#333'
    }
  }
},
tooltip: {
  formatter: function() {
    return this.point.name + ': ' + this.point.y + '%';
  }
}

Salin selepas log masuk

Ringkasan:
Melalui langkah di atas, kita boleh menggunakan perpustakaan Highcharts untuk mencipta carta piramid dan menyesuaikan gaya dan kesan interaktif carta mengikut keperluan. Saya harap artikel ini dapat membantu pembaca menggunakan Highcharts dengan lebih baik untuk mencipta carta piramid dan menggunakannya pada analisis data dan kerja sokongan keputusan.

Pautan rujukan: https://www.highcharts.com/docs/chart-and-series-types/pyramid-chart

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