Cara membuat carta corong menggunakan Highcharts

Cara membuat carta corong menggunakan Highcharts

Dalam bidang visualisasi data, carta corong ialah jenis carta biasa yang memaparkan secara visual aliran, penapisan dan proses transformasi data. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan pelbagai jenis carta dan pilihan penyesuaian. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta corong dan memberikan contoh kod khusus.

Pertama, kita perlu memperkenalkan perpustakaan Highcharts dan helaian gaya yang diperlukan. Tambahkan kod berikut pada kepala fail HTML:

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

Seterusnya, tambahkan elemen bekas pada bahagian badan fail HTML untuk memaparkan carta corong:

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

Kemudian, buat objek konfigurasi Highcharts dalam bahagian JavaScript dan tetapkan Pilihan berkaitan untuk carta corong. Berikut ialah contoh konfigurasi asas:

var options = {
  chart: {
    type: 'funnel',
    marginRight: 100
  },
  title: {
    text: '漏斗图表示例'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> ({point.y})',
        connectorColor: 'silver'
      },
      neckWidth: '30%',
      neckHeight: '25%'
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: '流失率',
    data: [
      ['浏览量', 5000],
      ['点击量', 4000],
      ['加入购物车', 3000],
      ['下单量', 2000],
      ['支付量', 1000]
    ]
  }]
};

Dalam konfigurasi di atas, kami menetapkan jenis carta kepada carta corong ('corong'), tajuk carta ('contoh carta corong'), dan data corong carta. Antaranya, data diwakili dalam bentuk tatasusunan, dan setiap elemen tatasusunan mengandungi dua nilai Nilai pertama mewakili nama langkah proses, dan nilai kedua mewakili bilangan langkah.

Seterusnya, kita boleh menggunakan fungsi chart Highcharts untuk menarik carta ke dalam bekas yang ditentukan.

Highcharts.chart('container', options);

Tambahkan kod di atas pada bahagian JavaScript untuk mencipta carta corong mudah menggunakan Highcharts.

Sebagai tambahan kepada pilihan konfigurasi asas yang dinyatakan di atas, Highcharts juga menyediakan pilihan yang kaya untuk menyesuaikan penampilan dan interaksi carta corong. Anda boleh melaksanakan fungsi tersuai ini dengan mengubah suai sifat objek konfigurasi.

options.plotOptions.series.dataLabels.format = '<b>{point.name}</b> ({point.y}，{point.percentage:.1f}%)';
options.plotOptions.series.minHeight = '10';
options.legend.enabled = true;

Sebagai contoh, anda boleh mengubah suai format label data, memaparkan peratusan data;

Dengan langkah di atas, kami boleh mencipta carta corong menggunakan perpustakaan Highcharts dan menyesuaikannya mengikut keperluan kami. Highcharts juga menyediakan jenis dan pilihan carta lain yang kaya, anda boleh mendapatkan lebih banyak maklumat dalam dokumentasi rasmi. Saya harap artikel ini akan membantu anda belajar menggunakan Highcharts untuk mencipta carta corong.

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