Comment utiliser des graphiques en chandeliers pour afficher des données dans Highcharts-js tutoriel-php.cn

Comment utiliser des graphiques en chandeliers pour afficher des données dans Highcharts

Highcharts est une bibliothèque de graphiques JavaScript très populaire qui peut afficher diverses formes de données. Le graphique en chandeliers est un type de graphique spécialement utilisé pour afficher des données financières telles que les actions. Il peut afficher intuitivement des informations telles que le prix d'ouverture, le prix de clôture, le prix le plus élevé, le prix le plus bas, etc. Cet article explique comment utiliser les graphiques en chandeliers pour afficher des données dans Highcharts et donne des exemples de code spécifiques.

1. Préparation

Avant d'utiliser Highcharts, nous devons introduire le fichier JavaScript de Highcharts. Il peut être introduit via CDN ou en téléchargeant des fichiers locaux. Voici la méthode CDN à titre d'exemple :

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

Copier après la connexion

De plus, afin de faciliter l'affichage des données, une bibliothèque JavaScript open source Faker.js est utilisée pour générer des données aléatoires. Il peut également être introduit via CDN :

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

Copier après la connexion

2. Créez un conteneur

Pour afficher le graphique Highcharts, vous devez d'abord créer un élément conteneur, généralement une balise div, et spécifier un identifiant, par exemple :

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

Copier après la connexion

Ici nous utiliserons le conteneur de graphiques. L'ID est défini sur "chart-container".

3. Configurer les données

Ici, nous devons générer de fausses données pour afficher le graphique en chandeliers. Nous pouvons utiliser la bibliothèque Faker.js pour générer des données aléatoires, puis les formater au format de données requis par Highcharts. Voici un exemple de génération de 100 points de données :

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

Copier après la connexion

Le code ci-dessus générera un tableau contenant 100 points de données. Chaque point de données est un tableau contenant cinq valeurs, qui sont l'index du point de données et le prix d'ouverture. prix le plus élevé, prix le plus bas et cours de clôture.

4. Créer un graphique en chandeliers

Une fois que nous avons les données, nous pouvons créer un graphique en chandeliers de base. Ce qui suit est un exemple de code simple :

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

Copier après la connexion

Le code ci-dessus créera un graphique en chandeliers dans le conteneur "chart-container", en utilisant les données aléatoires générées précédemment. Parmi eux :

type: 'chandelier' spécifie le type de graphique comme graphique en chandelier. 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
  }]
});

Copier après la connexion

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

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

title: { text: 'Stock Data' }

series : [{ data: data }] spécifie la série de données et définit les données aléatoires précédemment générées comme série de données.

5. Style personnalisé

Le style de graphique en chandelier par défaut peut ne pas répondre à nos besoins et nous devons personnaliser le style. Voici un exemple de code légèrement plus complexe qui permet des effets de style plus riches :




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

Copier après la connexion

Dans le code ci-dessus, nous pouvons voir que ce qui suit a été ajouté :
xAxis.labels.formatter Ensembles de propriétés l'étiquette de l'axe X à l'index des données. La propriété
yAxis.labels.formatter définit l'étiquette de l'axe Y sur un signe dollar, qui peut également être modifié en fonction des besoins réels. La propriété
tooltip.pointFormat ajuste le format de la boîte de dialogue, y compris des informations telles que le prix d'ouverture, le prix le plus élevé, le prix le plus bas et le prix de clôture.
La propriété plotOptions.candlestick est utilisée pour définir le style du graphique en chandeliers. Ici, nous spécifions les couleurs montantes et descendantes et les couleurs de bordure, et définissons la largeur de ligne sur 1.
6. Résumé
Utiliser Highcharts pour afficher des graphiques en chandeliers n'est pas très compliqué. Nous devons d'abord préparer les données, puis créer un élément conteneur pour spécifier l'ID, puis créer une instance Highcharts et transmettre l'ID du conteneur, et enfin définir les données, le style, le titre et d'autres attributs. Bien entendu, les paramètres de style spécifiques doivent être ajustés en fonction de la situation réelle. Voici l'exemple de code complet :
Ce qui précède représente l'ensemble du processus d'utilisation de Highcharts pour afficher des graphiques en chandeliers. Grâce à l'exemple de code ci-dessus, nous pouvons apprendre plusieurs domaines principaux :
Importer des fichiers JavaScript Highcharts.
Importez le fichier JavaScript Faker.js.
Créez un élément conteneur avec un identifiant.
🎜Utilisez Faker.js pour générer des données aléatoires. 🎜🎜Créez une nouvelle instance Highcharts et transmettez l'ID de l'élément conteneur. 🎜🎜Définissez le type de graphique en chandeliers que vous souhaitez afficher dans l'instance Highcharts. 🎜🎜 Transmettez les données générées dans l'instance Highcharts en tant que propriété Data. 🎜🎜Formater les données pour les étiquettes de l'axe X et les étiquettes de l'axe Y : comme la définition des signes dollar, etc. 🎜🎜Définissez les propriétés liées au style du graphique en chandeliers dans l'instance Highcharts : telles que la couleur, la largeur de la ligne, etc. 🎜🎜Définissez le format de l'info-bulle dans l'instance Highcharts et définissez le contenu de l'invite de manière très détaillée. 🎜🎜Définissez un titre pour décrire le contenu du graphique. 🎜🎜🎜Si vous connaissez les bases de Highcharts et la syntaxe de base de JavaScript, le code ci-dessus devrait être facile à comprendre. Les débutants peuvent dans un premier temps maîtriser les compétences connexes de Highcharts.Pour les ingénieurs techniques expérimentés, la lecture de cet article sera également très bénéfique. La nécessité technique de la visualisation graphique frontale continue d'augmenter.Je pense que cet article peut également vous aider à fournir une base solide. pour avancer. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!