Grafico ad area utilizzando spline

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora un esempio di un grafico ad area che utilizza la spline. Comprenderemo anche configurazioni aggiuntive. Abbiamo cambiato l'attributo type nel grafico.

grafico

Configurare il tipo di grafico in modo che sia basato su "areapline". chart.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

var chart = {
   type: 'areaspline'  
};

Esempio

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: 'areaspline'
      },
      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'
         }
      },
      tooltip : {
         shared: true, valueSuffix: ' units'
      },
      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]
         }
      ]
   };
}

Risultato

Verifica il risultato.