Grafico ad area con valori mancanti

Di seguito è riportato un esempio di un grafico ad area con valori mancanti.

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 con valori mancanti. Abbiamo aggiunto l'attributo spacingBottom nel grafico.

grafici

Configura il file spacingBottom del grafico come 30. Significa lo spazio tra il bordo inferiore del grafico e il contenuto (area del tracciato, titolo ed etichette dell'asse, titolo, sottotitolo o legenda nella posizione superiore).

var chart = {
   type: 'area',
   spacingBottom: 30
};

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: 'area',
         spacingBottom: 30
      },
      title: {
         text: 'Fruit consumption *'
      },
      subtitle : {
         text: '* Jane\'s banana consumption is unknown',
         floating: true,
         align: 'right',
         verticalAlign: 'bottom',
         y: 15
      },
      legend : {
         layout: 'vertical',
         align: 'left',
         verticalAlign: 'top',
         x: 150,
         y: 100,
         floating: true,
         borderWidth: 1,
         backgroundColor: (
            Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
      },
      xAxis:{
         categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
      },
      yAxis : {
         title: {
            text: 'Y-Axis'
         },
         labels: {
            formatter: function () {
               return this.value;
            }
         }
      },
      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: [0, 1, 4, 4, 5, 2, 3, 7]
         }, 
         {
            name: 'Jane',
            data: [1, 0, 3, null, 3, 1, 2, 1]
         }
      ]
   };
}

Risultato

Verifica il risultato.