So verwenden Sie Candlestick-Charts, um Daten in Highcharts anzuzeigen-js-Tutorial-php.cn

So verwenden Sie Candlestick-Charts, um Daten in Highcharts anzuzeigen

Highcharts ist eine sehr beliebte JavaScript-Diagrammbibliothek, die verschiedene Datenformen anzeigen kann. Candlestick-Chart ist eine Art Diagramm, das speziell zur Anzeige von Finanzdaten wie Aktien verwendet wird. Es kann intuitiv Informationen wie Eröffnungspreis, Schlusskurs, Höchstpreis, Tiefstpreis usw. anzeigen. In diesem Artikel wird erläutert, wie Sie Candlestick-Diagramme zum Anzeigen von Daten in Highcharts verwenden, und es werden konkrete Codebeispiele gegeben.

1. Vorbereitung

Bevor wir Highcharts verwenden, müssen wir die JavaScript-Datei von Highcharts einführen. Es kann über CDN oder das Herunterladen lokaler Dateien eingeführt werden. Hier ist die CDN-Methode als Beispiel:

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

Nach dem Login kopieren

Um die Anzeige von Daten zu erleichtern, wird außerdem eine Open-Source-JavaScript-Bibliothek Faker.js verwendet, um Zufallsdaten zu generieren. Es kann auch über CDN eingeführt werden:

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

Nach dem Login kopieren

2. Erstellen Sie einen Container

Um das Highcharts-Diagramm anzuzeigen, müssen Sie zunächst ein Containerelement erstellen, normalerweise ein div-Tag, und eine ID angeben, zum Beispiel:

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

Nach dem Login kopieren

Hier Wir werden den Chart-Container verwenden. Die ID ist auf „Chart-Container“ eingestellt.

3. Daten einrichten

Hier müssen wir einige gefälschte Daten generieren, um das Candlestick-Diagramm anzuzeigen. Wir können die Faker.js-Bibliothek verwenden, um zufällige Daten zu generieren und diese dann in das von Highcharts benötigte Datenformat zu formatieren. Das Folgende ist ein Beispiel für die Generierung von 100 Datenpunkten:

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]);
}

Nach dem Login kopieren

Der obige Code generiert ein Array mit 100 Datenpunkten. Jeder Datenpunkt ist ein Array mit fünf Werten, die den Index des Datenpunkts und den Eröffnungspreis darstellen. Höchster Preis, niedrigster Preis und Schlusskurs.

4. Erstellen Sie ein Candlestick-Diagramm

Nachdem wir die Daten haben, können wir ein einfaches Candlestick-Diagramm erstellen. Das Folgende ist ein einfacher Beispielcode:

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

Nach dem Login kopieren

Der obige Code erstellt unter Verwendung der zuvor generierten Zufallsdaten ein Candlestick-Diagramm im Container „Chart-Container“. Darunter:

type: 'candlestick' gibt den Diagrammtyp als Candlestick-Diagramm an. 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
  }]
});

Nach dem Login kopieren

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

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

title: { text: 'Stock Data'

series: [{ data: data }] gibt die Datenreihe an und legt die zuvor generierten Zufallsdaten als Datenreihe fest.

5. Benutzerdefinierter Stil

Der standardmäßige Kerzendiagrammstil entspricht möglicherweise nicht unseren Anforderungen und wir müssen den Stil anpassen. Hier ist ein etwas komplexerer Beispielcode, der umfangreichere Styling-Effekte ermöglicht:




  
  
  <script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
  Highcharts展示烛台图示例


  <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>

Nach dem Login kopieren

Im obigen Code können wir sehen, dass Folgendes hinzugefügt wurde:
xAxis.labels.formatter Eigenschaftssätze die Beschriftung der X-Achse zum Datenindex.
yAxis.labels.formatter-Eigenschaft legt die Beschriftung der Y-Achse auf ein Dollarzeichen fest, das auch entsprechend den tatsächlichen Anforderungen geändert werden kann.
tooltip.pointFormat-Eigenschaft passt das Format des Eingabeaufforderungsfelds an, einschließlich Informationen wie Eröffnungspreis, höchster Preis, niedrigster Preis und Schlusskurs.
Die Eigenschaft plotOptions.candlestick wird verwendet, um den Stil des Candlestick-Diagramms festzulegen. Hier legen wir die steigenden und fallenden Farben und Rahmenfarben fest und setzen die Linienbreite auf 1.
6. Zusammenfassung
Die Verwendung von Highcharts zur Anzeige von Candlestick-Charts ist nicht sehr kompliziert. Zuerst müssen wir die Daten vorbereiten, dann ein Containerelement erstellen, um die ID anzugeben, dann eine Highcharts-Instanz erstellen und die Container-ID übergeben und schließlich die Daten, den Stil, den Titel und andere Attribute festlegen. Natürlich müssen die spezifischen Stileinstellungen entsprechend der tatsächlichen Situation angepasst werden. Das Folgende ist der vollständige Beispielcode:
Das Obige ist der gesamte Prozess der Verwendung von Highcharts zur Anzeige von Candlestick-Charts. Durch den obigen Beispielcode können wir mehrere Hauptbereiche lernen:
Highcharts-JavaScript-Dateien importieren.
Importieren Sie die JavaScript-Datei Faker.js.
Containerelement mit ID erstellen.
🎜Verwenden Sie Faker.js, um Zufallsdaten zu generieren. 🎜🎜Erstellen Sie eine neue Highcharts-Instanz und übergeben Sie die Containerelement-ID. 🎜🎜Definieren Sie die Art des Candlestick-Diagramms, das Sie in der Highcharts-Instanz anzeigen möchten. 🎜🎜 Übergeben Sie die generierten Daten als Data-Eigenschaft an die Highcharts-Instanz. 🎜🎜Formatieren Sie Daten für X-Achsen-Beschriftungen und Y-Achsen-Beschriftungen: z. B. das Setzen von Dollarzeichen usw. 🎜🎜Legen Sie die stilbezogenen Eigenschaften des Candlestick-Charts in der Highcharts-Instanz fest: wie Farbe, Linienbreite usw. 🎜🎜Legen Sie das Tooltip-Format in der Highcharts-Instanz fest und legen Sie den Inhalt der Eingabeaufforderung sehr detailliert fest. 🎜🎜Legen Sie einen Titel fest, um den Inhalt des Diagramms zu beschreiben. 🎜🎜🎜Wenn Sie die Grundlagen von Highcharts und die grundlegende Syntax von JavaScript kennen, sollte der obige Code leicht zu verstehen sein. Auch für erfahrene technische Ingenieure ist die Lektüre dieses Artikels von großem Nutzen. Die technische Notwendigkeit der Front-End-Diagrammvisualisierung wird auch Ihnen weiterhelfen fürs Weiterkommen. 🎜
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Candlestick-Charts, um Daten in Highcharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!