Angular Highcharts - Graphique en anneau

Voici un exemple de graphique en anneau.

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

Un exemple de graphique en anneau 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'
};

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: {
            shadow: false,
            center: ['50%', '50%'],
            size:'45%',
            innerSize: '20%'            
         }
      },
      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.