Comment utiliser des graphiques 3D pour afficher des données dans Highcharts

Highcharts est une bibliothèque de graphiques JavaScript très populaire qui fournit de nombreux types de graphiques différents, y compris des graphiques 3D. Cet article présentera en détail comment utiliser des graphiques 3D pour afficher des données dans Highcharts et fournira des exemples de code spécifiques.

1. Présentation de la bibliothèque Highcharts

Tout d'abord, nous devons introduire la bibliothèque Highcharts dans le fichier HTML. Cela peut être réalisé des manières suivantes :

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

2. Préparer les données

Nous devons préparer certaines données à afficher dans le graphique 3D. Ces données sont généralement un objet JavaScript constitué d'un tableau. Par exemple :

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

Cet objet contient 4 séries de données différentes, chaque série comprend un nom et un tableau, chaque élément du tableau représente un point de données.

3. Créer un graphique 3D

Ensuite, nous pouvons créer un graphique 3D. Tout d’abord, nous devons décider quel type de graphique nous voulons créer. Highcharts propose plusieurs types différents de graphiques 3D, notamment des histogrammes 3D, des nuages ​​de points 3D, des graphiques cylindriques 3D et des cartes 3D. Dans cet article, nous allons créer un histogramme 3D avec le code suivant :

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

Tout d'abord, nous définissons un div nommé "conteneur" dans le document HTML, qui contiendra le graphique que nous avons créé.

Ensuite, nous utilisons la méthode Highcharts.chart() pour créer le graphique. Dans les options du graphique, nous définissons le type sur « colonne », ce qui signifie que nous allons créer un histogramme. Nous définissons également l'option options3d, activons la fonctionnalité 3D et définissons certains paramètres 3D tels que les angles alpha et bêta, la profondeur, etc.

Nous avons également défini certaines options de titre et d'axe, ainsi que l'option de colonne dans plotOptions pour définir la profondeur du histogramme.

Enfin, nous spécifions la série de données et utilisons l'objet de données précédemment défini pour définir le nom et les données de chaque série.

4. Exécutez le code

Maintenant, nous avons le code prêt et pouvons l'exécuter dans le navigateur. Lorsque nous chargeons le fichier HTML et visualisons le graphique, nous verrons un histogramme 3D qui affichera la température moyenne pour chaque mois en utilisant les données que nous avons définies précédemment.

Des exemples de codes peuvent être consultés dans le référentiel de code suivant :

https://github.com/Jackie199199/Highcharts-3D-Demo

Summary

Highcharts est une bibliothèque de graphiques JavaScript très puissante qui fournit une variété de graphiques variés. types et fonctionnalités, y compris les graphiques 3D. Dans cet article, nous expliquons comment créer des graphiques 3D dans Highcharts et fournissons des exemples de code concrets. Si vous souhaitez ajouter une visualisation de données interactive de haute qualité à votre page Web ou application, Highcharts peut être l'une de vos meilleures options.

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!