Cara menggunakan carta candlestick untuk memaparkan data dalam Highcharts

Highcharts ialah perpustakaan carta JavaScript yang sangat popular yang boleh memaparkan pelbagai bentuk data. Carta Candlestick ialah jenis carta yang digunakan khas untuk memaparkan data kewangan seperti saham Ia boleh memaparkan maklumat secara intuitif seperti harga pembukaan, harga penutup, harga tertinggi, harga terendah, dll. Artikel ini akan memperkenalkan cara menggunakan carta candlestick untuk memaparkan data dalam Highcharts dan memberikan contoh kod khusus.

1. Persediaan

Sebelum menggunakan Highcharts, kami perlu memperkenalkan fail JavaScript Highcharts. Ia boleh diperkenalkan melalui CDN atau memuat turun fail tempatan Berikut adalah kaedah CDN sebagai contoh:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>

Selain itu, untuk memudahkan paparan data, perpustakaan JavaScript sumber terbuka Faker.js digunakan untuk menjana data rawak. Ia juga boleh diperkenalkan melalui CDN:

<script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>

2. Buat bekas

Untuk memaparkan carta Highcharts, anda perlu mencipta elemen kontena, biasanya tag div, dan nyatakan ID, contohnya:

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

Di sini kami akan menggunakan bekas carta ID ditetapkan kepada "bekas carta".

3. Sediakan data

Di sini, kita perlu menjana beberapa data palsu untuk memaparkan carta candlestick. Kita boleh menggunakan perpustakaan Faker.js untuk menjana data rawak dan kemudian memformatnya ke dalam format data yang diperlukan oleh Highcharts. Berikut ialah contoh menjana 100 titik data:

let data = [];
for (let i = 0; i < 100; i++) {
  let open = parseFloat(Faker.Finance.amount(1000, 5000));
  let high = parseFloat(Faker.Finance.amount(open, open * 1.1));
  let low = parseFloat(Faker.Finance.amount(open * 0.9, open));
  let close = parseFloat(Faker.Finance.amount(low, high));
  data.push([i, open, high, low, close]);
}

Kod di atas akan menghasilkan tatasusunan yang mengandungi 100 titik data Setiap titik data ialah tatasusunan yang mengandungi lima nilai, iaitu indeks titik data dan harga pembukaan. harga tertinggi, harga terendah dan harga penutup.

4. Buat carta candlestick

Selepas kami mempunyai data, kami boleh mencipta carta candlestick asas. Berikut ialah kod sampel mudah:

Highcharts.chart('chart-container', {
  chart: {
    type: 'candlestick'
  },
  title: {
    text: '股票数据'
  },
  series: [{
    data: data
  }]
});

Kod di atas akan mencipta carta candlestick dalam bekas "cart-container", menggunakan data rawak yang dijana sebelum ini. Antaranya:

• jenis: 'candlestick' menentukan jenis carta sebagai carta candlestick. type: 'candlestick'指定了图表类型为烛台图。
• title: { text: '股票数据' }设置了图表标题为“股票数据”。
• series: [{ data: data }]指定了数据系列，将之前生成的随机数据设置为数据系列。

五、自定义样式

默认的烛台图样式可能并不符合我们的需求，需求自定义样式。以下是一个稍微复杂一些的示例代码，可以实现更丰富的样式效果：

Highcharts.chart('chart-container', {
  chart: {
    type: 'candlestick'
  },
  title: {
    text: '股票数据'
  },
  xAxis: {
    labels: {
      formatter: function () {
        return data[this.value][0];
      }
    }
  },
  yAxis: {
    opposite: false,
    labels: {
      formatter: function () {
        return '$' + this.value;
      }
    }
  },
  tooltip: {
    pointFormat: '<span style="font-weight:bold">{series.name}</span><br>' +
        '开盘价: <b>${point.open}</b><br/>' +
        '最高价: <b>${point.high}</b><br/>' +
        '最低价: <b>${point.low}</b><br/>' +
        '收盘价: <b>${point.close}</b><br/>'
  },
  plotOptions: {
    candlestick: {
      color: '#0f0',
      upColor: '#f00',
      lineColor: '#000',
      upLineColor: '#000',
      lineWidth: 1
    }
  },
  series: [{
    name: '股票价格',
    data: data
  }]
});

在以上代码中，我们可以看到添加了以下内容：

• xAxis.labels.formatter属性将X轴的标签设置为数据索引。
• yAxis.labels.formatter属性将Y轴的标签设置为美元符号，这里也可以根据实际需要进行修改。
• tooltip.pointFormat属性调整了提示框的格式，包含开盘价、最高价、最低价和收盘价等信息。
• plotOptions.candlestick
tajuk: { text: 'Data Stok' } Tetapkan tajuk carta kepada "Data Stok".

siri: [{ data: data }] menentukan siri data dan menetapkan data rawak yang dijana sebelum ini sebagai siri data.

5. Gaya tersuai

Gaya carta candlestick lalai mungkin tidak memenuhi keperluan kami dan kami perlu menyesuaikan gaya. Berikut ialah kod contoh yang lebih kompleks yang membolehkan kesan penggayaan yang lebih kaya:

  
  
  <script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
  


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

  <script>
    let data = [];
    for (let i = 0; i < 100; i++) {
      let open = parseFloat(Faker.Finance.amount(1000, 5000));
      let high = parseFloat(Faker.Finance.amount(open, open * 1.1));
      let low = parseFloat(Faker.Finance.amount(open * 0.9, open));
      let close = parseFloat(Faker.Finance.amount(low, high));
      data.push([i, open, high, low, close]);
    }

    Highcharts.chart('chart-container', {
      chart: {
        type: 'candlestick'
      },
      title: {
        text: '股票数据'
      },
      xAxis: {
        labels: {
          formatter: function () {
            return data[this.value][0];
          }
        }
      },
      yAxis: {
        opposite: false,
        labels: {
          formatter: function () {
            return '$' + this.value;
          }
        }
      },
      tooltip: {
        pointFormat: '<span style="font-weight:bold">{series.name}</span><br>' +
            '开盘价: <b>${point.open}</b><br/>' +
            '最高价: <b>${point.high}</b><br/>' +
            '最低价: <b>${point.low}</b><br/>' +
            '收盘价: <b>${point.close}</b><br/>'
      },
      plotOptions: {
        candlestick: {
          color: '#0f0',
          upColor: '#f00',
          lineColor: '#000',
          upLineColor: '#000',
          lineWidth: 1
        }
      },
      series: [{
        name: '股票价格',
        data: data
      }]
    });
  </script>

• Dalam kod di atas, kita dapat melihat bahawa perkara berikut telah ditambahkan:
• xAxis.labels.formatter Set harta label paksi-X kepada indeks data.
• yAxis.labels.formatter harta menetapkan label paksi Y kepada tanda dolar, yang juga boleh diubah suai mengikut keperluan sebenar.
• hartatooltip.pointFormat melaraskan format kotak gesaan, termasuk maklumat seperti harga pembukaan, harga tertinggi, harga terendah dan harga penutupan.
• Harta plotOptions.candlestick digunakan untuk menetapkan gaya carta candlestick Di sini kami menentukan warna naik dan turun serta warna sempadan, dan menetapkan lebar garisan kepada 1.
• 6. Ringkasan
• Menggunakan Carta Tinggi untuk memaparkan carta candlestick tidak begitu rumit. Mula-mula kita perlu menyediakan data, kemudian buat elemen kontena untuk menentukan ID, kemudian buat contoh Highcharts dan masukkan ID bekas, dan akhirnya tetapkan data, gaya, tajuk dan atribut lain. Sudah tentu, tetapan gaya tertentu perlu diselaraskan mengikut situasi sebenar. Berikut ialah kod contoh lengkap:
rrreee
• Di atas adalah keseluruhan proses menggunakan Highcharts untuk memaparkan carta candlestick melalui contoh kod di atas kita boleh mempelajari beberapa bidang utama:
• Import Highcharts JavaScript files.
• Import fail JavaScript Faker.js.

  Buat elemen bekas dengan id.

  🎜Gunakan Faker.js untuk menjana data rawak. 🎜🎜Buat contoh Highcharts baharu dan masukkan ID elemen kontena. 🎜🎜Tentukan jenis carta candlestick yang anda mahu paparkan dalam contoh Highcharts. 🎜🎜 Hantar data yang dijana ke dalam tika Highcharts sebagai sifat Data. 🎜🎜Formatkan data untuk label paksi-X dan label paksi-Y: seperti menetapkan tanda dolar, dsb. 🎜🎜Tetapkan sifat berkaitan gaya carta candlestick dalam contoh Highcharts: seperti warna, lebar garisan, dsb. 🎜🎜Tetapkan format petua alat dalam contoh Highcharts dan tetapkan kandungan segera dengan sangat terperinci. 🎜🎜Tetapkan tajuk untuk menerangkan kandungan carta. 🎜🎜🎜Jika anda tahu asas Highcharts dan sintaks asas JavaScript, kod di atas sepatutnya mudah difahami. Untuk pemula, mereka pada mulanya boleh menguasai kemahiran Highcharts yang berkaitan Untuk jurutera teknikal kanan, membaca artikel ini juga akan mendapat banyak manfaat asas yang kukuh untuk maju ke hadapan. 🎜

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