Cara menggunakan carta air terjun untuk memaparkan data dalam Highcharts

Cara menggunakan carta air terjun untuk memaparkan data dalam Highcharts, contoh kod khusus diperlukan

Carta Air Terjun ialah carta visualisasi data yang biasa digunakan, yang boleh menunjukkan naik turun data, dan amat sesuai untuk memaparkan maklumat kewangan Data, data jualan, data inventori, dsb. Dalam Highcharts, kami boleh menggunakan carta air terjun dengan mudah untuk memaparkan data dan menyesuaikannya dengan menetapkan beberapa parameter. Berikut akan memperkenalkan cara menggunakan carta air terjun untuk memaparkan data dalam Highcharts, dan memberikan contoh kod khusus.

1. Perkenalkan fail perpustakaan Highcharts.

Perkenalkan fail perpustakaan Highcharts ke dalam fail HTML, termasuk Highcharts.js dan Highcharts-more.js. Jika anda perlu menggunakan modul histogram Highcharts, anda juga perlu memperkenalkan fail highcharts-3d.js.

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

2. Buat bekas.

Buat bekas dalam fail HTML untuk memaparkan carta Highcharts.

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

3. Tulis kod JavaScript.

Buat fungsi JavaScript untuk menjana carta air terjun.

function createWaterfallChart() {
  // 定义数据
  var categories = ['开支1', '收入1', '开支2', '收入2', '开支3'];
  var amounts = [1000, -800, -500, 600, -300];

  // 创建图表
  Highcharts.chart('container', {
    chart: {
      type: 'waterfall'
    },
    title: {
      text: '瀑布图示例'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      title: {
        text: '金额'
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: '金额',
      data: amounts,
      dataLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.y, 0, '', ',');
        },
        style: {
          color: '#ffffff',
          textOutline: 0
        }
      }
    }],
    tooltip: {
      pointFormat: '<b>{point.y}</b> 元'
    }
  });
}

// 调用函数生成瀑布图
createWaterfallChart();

Dalam kod di atas, kami mula-mula mentakrifkan data, di mana kategori mewakili kategori data dan jumlah mewakili nilai berangka data. Kemudian buat carta melalui kaedah Highcharts.chart, di mana chart.type ditetapkan kepada 'waterfall', yang bermaksud carta air terjun dijana. Item konfigurasi xAxis dan yAxis masing-masing menetapkan parameter yang berkaitan bagi paksi-x dan paksi-y. Legenda ditetapkan kepada palsu, yang bermaksud legenda tidak dipaparkan. Dalam siri ini, tetapkan nama kepada 'amaun' dan data kepada amaun, yang mewakili data yang akan dipaparkan. Tetapkan label data supaya kelihatan melalui dataLabels.enabled dan tetapkan format label data melalui pemformat. petua alat digunakan untuk menetapkan kandungan kotak gesaan.

4. Jalankan kod.

Simpan fail HTML dan bukanya melalui penyemak imbas untuk melihat carta air terjun yang dihasilkan.

Melalui langkah di atas, kita boleh menggunakan carta air terjun dengan mudah untuk memaparkan data dalam Carta Tinggi. Mengikut keperluan sebenar, kami boleh memperibadikan carta lagi, termasuk pelarasan pada warna, gaya, dsb. Semoga kandungan di atas dapat membantu anda!

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