Spline con ejes invertidos
Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Highcharts . Consideremos ahora el siguiente ejemplo para comprender mejor una spline con ejes invertidos.
Configuraciones
Configure el tipo de gráfico para que esté basado en splines. chart.type decide el tipo de serie para el gráfico. Aquí, el valor predeterminado es "línea". Configure los ejes a invertir. Cuando el eje x verdadero es vertical y el eje y es horizontal, si hay una serie de barras en el gráfico, la misma se invertirá. Aquí, el valor predeterminado es falso.
var chart = {
type: 'spline',
inverted: true
};
Ejemplo
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]]
}]
};
}
Resultado
Verifique el resultado.