Graphique avec colonne, ligne et secteur

Voici un exemple de graphique avec colonne, ligne et secteur.

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

Un exemple de graphique combiné comportant des colonnes, des lignes et des secteurs est donné ci-dessous.

Configurations

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

séries

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

series : [{
   type: 'column',
   name: 'Jane',
   data: [3, 2, 1, 3, 4]
}]

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 = {               
      title : {
         text: 'Combination chart'   
      },     
      xAxis : {
         categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      labels : {
         items: [{
            html: 'Total fruit consumption',
            style: {
               left: '50px',
               top: '18px',
               color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
         }]
      },
      series : [
         {
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
         }, 
         {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
         }, 
         {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 0]
         }, 
         {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33]
         },
         {
            type: 'pie',
            name: 'Total consumption',
            data: [
               {
                  name: 'Jane',
                  y: 13,
                  color: Highcharts.getOptions().colors[0] // Jane's color
               }, 
               {
                  name: 'John',
                  y: 23,
                  color: Highcharts.getOptions().colors[1] // John's color
               }, 
               {
                  name: 'Joe',
                  y: 19,
                  color: Highcharts.getOptions().colors[2] // Joe's color
               }
            ],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
               enabled: false
            }            
         }, 
      ]
   };
}

Résultat

Vérifiez le résultat.