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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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