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

Comment utiliser le graphique en cascade pour afficher des données dans des Highcharts, des exemples de code spécifiques sont requis

Le graphique en cascade est un graphique de visualisation de données couramment utilisé, qui peut montrer les hauts et les bas des données et est particulièrement adapté à l'affichage d'informations financières. Données, données de ventes, données d'inventaire, etc. Dans Highcharts, nous pouvons facilement utiliser des graphiques en cascade pour afficher les données et les personnaliser en définissant certains paramètres. Ce qui suit explique comment utiliser les graphiques en cascade pour afficher des données dans des Highcharts et fournit des exemples de code spécifiques.

1. Présentez les fichiers de la bibliothèque Highcharts.

Introduisez les fichiers de la bibliothèque Highcharts dans les fichiers HTML, notamment Highcharts.js et Highcharts-more.js. Si vous devez utiliser le module histogramme de Highcharts, vous devez également introduire le fichier highcharts-3d.js.

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

2. Créer un conteneur.

Créez un conteneur dans un fichier HTML pour afficher les graphiques Highcharts.

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

3. Écrivez du code JavaScript.

Créez une fonction JavaScript pour générer un graphique en cascade.

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();

Dans le code ci-dessus, nous définissons d'abord les données, où les catégories représentent les catégories de données et les montants représentent les valeurs numériques des données. Créez ensuite un graphique via la méthode Highcharts.chart, où chart.type est défini sur « cascade », ce qui signifie qu'un graphique en cascade est généré. Les éléments de configuration xAxis et yAxis définissent respectivement les paramètres pertinents de l'axe x et de l'axe y. La légende est définie sur false, ce qui signifie que la légende n'est pas affichée. Dans la série, définissez le nom sur « montant » et les données sur les montants, qui représentent les données à afficher. Définissez les étiquettes de données pour qu'elles soient visibles via dataLabels.enabled et définissez le format des étiquettes de données via le formateur. l'info-bulle est utilisée pour définir le contenu de l'info-bulle.

4. Exécutez le code.

Enregistrez le fichier HTML et ouvrez-le via le navigateur pour voir le graphique en cascade généré.

Grâce aux étapes ci-dessus, nous pouvons facilement utiliser des graphiques en cascade pour afficher des données dans des Highcharts. En fonction des besoins réels, nous pouvons personnaliser davantage le graphique, notamment en ajustant la couleur, le style, etc. J'espère que le contenu ci-dessus vous sera utile !

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!