Scanalatura con assi invertiti

Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Highcharts . Consideriamo ora il seguente esempio per comprendere ulteriormente una Spline con assi invertiti.

Configurazioni

Configurare il tipo di grafico in modo che sia basato su spline. chart.type decide il tipo di serie per il grafico. Qui, il valore predefinito è "line". Configurare gli assi da invertire. Quando l'asse x vero è verticale e l'asse y è orizzontale, se nel grafico è presente una serie di barre, la stessa verrà invertita. Qui, il valore predefinito è false.

var chart = {
   type: 'spline',
   inverted: true
};

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: 'spline',
        inverted: true
      },
      title: {
        text: 'Atmosphere Temperature by Altitude'
      },
      subtitle: {
        text: 'According to the Standard Atmosphere Model'
      },
      xAxis:{
         reversed: false,
         title: {
            enabled: true,
            text: 'Altitude'
         },
         labels: {
            formatter: function () {
               return this.value + 'km';
            }
         },
         maxPadding: 0.05,
         showLastLabel: true
      },
      yAxis: {          
         title:{
            text: 'Temperature'
         },
         labels: {
            formatter: function () {
               return this.value + '\xB0';
            }
         },
         lineWidth: 2 
      },
      legand:{
         enabled: false
      },
      tooltip: {
         headerFormat: '<b>{series.name}</b><br/>',
         pointFormat: '{point.x} km: {point.y}\xB0C'
      },
      plotOptions: {
        spline: {
           marker: {
              enable: false
           }
        }
      },
      series : [{
         name: 'Temperature',
         data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
               [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
      }]
   };
}

Risultato

Verifica il risultato.