Angular Highcharts - Graphique à secteurs avec légendes

Voici un exemple de graphique à secteurs avec des légendes.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique à secteurs avec légendes est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

graphique

Configurez le type de graphique pour qu'il soit basé sur un «secteur». chart.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

var series = {
   type: 'pie'
};

plotOptions

Configurer les options de tracé pour avoir des légendes dans le graphique à secteurs plotOptions.pie.showInLegend attribut.

plotOptions : {
   pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
         enabled: false           
      },
      showInLegend: 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 : {
         plotBorderWidth: null,
         plotShadow: false
      },
      title : {
         text: 'Browser market shares at a specific website, 2014'   
      },
      tooltip : {
         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions : {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
      
            dataLabels: {
               enabled: false           
            },
      
            showInLegend: true
         }
      },
      series : [{
         type: 'pie',
         name: 'Browser share',
         data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            {
               name: 'Chrome',
               y: 12.8,
               sliced: true,
               selected: true
            },
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',      0.7]
         ]
      }]
   };
}

Résultat

Vérifiez le résultat.