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

Comment utiliser des graphiques combinés pour afficher des données dans Highcharts nécessite des exemples de code spécifiques

Avec la popularité de la visualisation de données dans tous les horizons, de plus en plus de personnes commencent à utiliser Highcharts, une puissante bibliothèque de graphiques JavaScript, pour afficher des données. Dans les applications pratiques, il est souvent nécessaire d'afficher les tendances changeantes de plusieurs indicateurs, ce qui nécessite l'utilisation de la fonction de graphique combiné.

Highcharts fournit une puissante fonction de graphique combiné qui peut mélanger plusieurs types de graphiques différents pour mieux transmettre la signification des données. Cet article explique comment utiliser des graphiques combinés pour afficher des données dans Highcharts et donne des exemples de code spécifiques.

Tout d’abord, nous devons créer un graphique avec plusieurs séries différentes. Par exemple, nous souhaitons afficher les tendances des ventes et des bénéfices sur une période donnée. Tout d'abord, nous pouvons créer un graphique linéaire de base pour montrer les changements dans les ventes :

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        title: {
            text: '金额'
        }
    },
    series: [{
        name: '销售额',
        data: [100, 200, 300, 400, 500, 600, 700]
    }]
});

Ensuite, nous pouvons créer un graphique à barres pour montrer les changements dans les bénéfices :

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }]
});

Dans le code ci-dessus, nous utilisons yAxis pour définir les deux axes y. correspondent respectivement aux ventes et au bénéfice. Les données de profit sont affichées à l'aide d'une série de types de colonnes et le paramètre yAxis est spécifié sur 1, ce qui signifie que le deuxième axe y est utilisé.

En plus des graphiques en courbes et en colonnes, Highcharts prend également en charge d'autres types de graphiques, tels que les graphiques en aires, les diagrammes circulaires, etc. Nous pouvons choisir différents types de graphiques en fonction de nos besoins et les afficher ensemble.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }, {
        name: '利润率',
        type: 'area',
        data: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35],
        yAxis: 1
    }, {
        name: '产品销量',
        type: 'pie',
        data: [{
            name: '产品A',
            y: 10
        }, {
            name: '产品B',
            y: 30
        }, {
            name: '产品C',
            y: 50
        }]
    }]
});

Dans le code ci-dessus, nous avons ajouté un graphique en aires (series.type est une aire) et un diagramme circulaire (series.type est un diagramme en secteurs). La combinaison de différents types de graphiques à travers différentes séries peut afficher les données de manière plus complète.

En résumé, grâce à la fonction de graphique combiné de la bibliothèque Highcharts, nous pouvons mélanger et afficher plusieurs types de graphiques différents ensemble pour mieux transmettre la signification des données. Sélectionnez simplement différents types de graphiques en fonction de vos besoins et ajoutez leurs informations de configuration à la série. J'espère que cet article pourra vous aider à comprendre comment utiliser des graphiques combinés pour afficher des données dans Highcharts.

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!