Comment utiliser des graphiques à courbes horizontales pour afficher des données dans Highcharts

Highcharts est une bibliothèque de graphiques JavaScript très populaire qui prend en charge plusieurs types de graphiques pour afficher des données. Parmi eux, le graphique en courbes horizontales est un type de graphique couramment utilisé pour afficher la position horizontale d'une certaine valeur dans les données.

Cet article expliquera comment utiliser les graphiques à lignes horizontales dans Highcharts pour afficher des données et fournir des exemples de code spécifiques. Voici les étapes :

Étape 1 : Préparer les données

Vous devez d'abord préparer les données, telles que les données suivantes :

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

Dans les données ci-dessus, le nom représente le nom de la ligne horizontale et la valeur représente la valeur de la ligne horizontale. Ici, nous utilisons 5 types de lignes horizontales, qui peuvent être augmentées ou diminuées selon les besoins.

Étape 2 : Créer un conteneur

Créez un conteneur HTML pour placer des graphiques Highcharts. Par exemple :

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

Étape 3 : Introduire la bibliothèque Highcharts

Introduire la bibliothèque Highcharts dans la page HTML. Par exemple :

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

Étape 4 : Écrire la configuration Highcharts

Écrire la configuration Highcharts dans un fichier JavaScript, y compris le titre, les données, l'axe des x, l'axe des y, etc. du graphique en courbes horizontales. Le type de graphique en courbes horizontales est xrange. Le code de configuration spécifique est le suivant :

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

Dans la configuration ci-dessus, le type de graphique est xrange, ce qui signifie générer un graphique à lignes horizontales. title représente le titre du graphique, xAxis représente l'axe des x et il n'y a qu'un seul élément « Valeur » dans les catégories car il n'y a qu'un seul axe des x dans le graphique en courbes horizontales. yAxis représente l'axe y, inversé représente l'inversion de l'axe y afin que la valeur la plus élevée soit en haut ; maxPadding représente la proportion d'espace laissé au-dessus et en dessous de l'axe y, et min et max représentent les valeurs minimale et maximale. de l'axe y. legend représente la légende, qui n'est pas nécessaire ici, elle est donc définie sur false. series représente la série de données, où name est le nom de la série de données, data est les données, borderRadius représente le rayon du congé de bordure, borderColor représente la couleur de la bordure, borderWidth représente la largeur de la bordure et pointWidth représente la largeur de la ligne horizontale.

Étape 5 : Afficher le graphique

Enfin, appelez la configuration Highcharts dans la page HTML et affichez le graphique dans le conteneur.

Highcharts.chart('container', options);

Le code complet est le suivant :

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


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

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

Voici toutes les étapes ci-dessus pour utiliser le graphique en courbes horizontales dans Highcharts pour afficher les données. J'espère que cela aide tout le monde.

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!