Graphique en aires avec valeurs inversées

Voici un exemple de graphique en aires avec des valeurs inversées.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant un exemple de graphique en aires avec des axes inversés. Nous comprendrons également la configuration supplémentaire et ajouterons un attribut inversé dans le graphique.

graphiques

Configurez l'inversé du graphique comme vrai.

Configurez les axes à inverser. Lorsque le vrai axe x est vertical et l'axe y est horizontal. Si une série de barres est présente dans le graphique, la même chose sera inversée. Ici, la valeur par défaut est false.

var chart = {
   type: 'area',
   inverted: true
};

Exemple

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
        type: 'area',
        inverted: true
      },
      title: {
        text: 'Average fruit consumption during one week'
      },
      subtitle : {
         style: {
            position: 'absolute',
            right: '0px',
            bottom: '10px'
         }
      },
      legend : {
         layout: 'vertical',
         align: 'left',
         verticalAlign: 'top',
         x: -150,
         y: 100,
         floating: true,
         borderWidth: 1,
         backgroundColor: (
            Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 
               '#FFFFFF'
      },
      xAxis:{
         categories: ['Monday','Tuesday','Wednesday','Thursday',
            'Friday','Saturday','Sunday'] 
      },
      yAxis : {
         title: {
            text: 'Number of units'
         },
         labels: {
            formatter: function () {
               return this.value;
            }
         },
         min:0
      },
      tooltip : {
         formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
               this.x + ': ' + this.y;
         }
      },
      plotOptions : {
         area: {
            fillOpacity: 0.5 
         }
      },
      credits:{
         enabled: false
      },
      series: [
         {
            name: 'John',
            data: [3, 4, 3, 5, 4, 10, 12]
         }, 
         {
            name: 'Jane',
            data: [1, 3, 4, 3, 3, 5, 4]
         }
      ]
   };
}

Résultat

Vérifiez le résultat.