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

Comment utiliser des graphiques empilés pour afficher des données dans Highcharts

WBOY

Libérer： 2023-12-18 17:56:46

original

690 Les gens l'ont consulté

Comment utiliser des graphiques empilés pour afficher des données dans Highcharts

Les graphiques empilés sont un moyen courant de visualisation de données, qui peut afficher la somme de plusieurs séries de données en même temps et afficher la somme de chaque série de données sous la forme d'un graphique à barres contribuent. Highcharts est une puissante bibliothèque JavaScript qui fournit une grande variété de graphiques et d'options de configuration flexibles pour répondre à divers besoins de visualisation de données. Dans cet article, nous présenterons comment utiliser Highcharts pour créer un graphique empilé et fournirons des exemples de code correspondants.

Tout d'abord, nous devons présenter le fichier de bibliothèque Highcharts. Ajoutez le code suivant dans la balise

de la page HTML :

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

Copier après la connexion

Créez ensuite un conteneur à l'intérieur de la balise Vous pouvez utiliser un élément

et lui attribuer un identifiant unique, tel que "chart-container". Le code est le suivant :

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

Copier après la connexion

Ensuite, nous pouvons utiliser du code JavaScript pour configurer et afficher le graphique. Pour créer un graphique empilé, nous devons utiliser la propriété Stacking de Highcharts et la définir sur "normal". Dans le même temps, nous devons également spécifier le nom de la série de données, les données et la méthode d'empilement. Le code est le suivant :

Highcharts.chart('chart-container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '堆叠图表示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '系列一',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '系列二',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '系列三',
        data: [3, 4, 4, 2, 5]
    }]
});

Copier après la connexion

Dans le code ci-dessus, nous créons un graphique à barres (tapez : 'bar') et définissons le titre sur "Exemple de graphique empilé". Les catégories sur l'axe des X sont les mois et l'axe des Y représente les valeurs numériques. La propriété inversée de la légende est définie sur true afin que les séries de données soient affichées dans un ordre empilé. L'attribut stacking dans plotOptions est défini sur « normal », ce qui signifie que la série de données est affichée de manière empilée. Enfin, nous spécifions trois séries de données via l'attribut series, y compris les noms et les données correspondantes.

Enfin, il nous suffit de placer ce code JavaScript dans la page pour garantir que le graphique empilé soit rendu lors du chargement de la page. Une fois terminé, nous aurons une page avec un graphique empilé qui affiche visuellement la somme et la contribution individuelle de plusieurs séries de données.

Ci-dessus sont les méthodes spécifiques et les exemples de code sur la façon d'utiliser des graphiques empilés pour afficher des données dans Highcharts. Avec une configuration et un codage simples, nous pouvons facilement créer un graphique empilé attrayant et facile à comprendre pour mieux afficher et analyser les données et nous aider à prendre des décisions plus éclairées.

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!