Gráfico de área usando Spline
Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico de áreas usando spline. También entenderemos la configuración adicional. Hemos cambiado el atributo de tipo en el gráfico.
gráfico
Configure el tipo de gráfico para que esté basado en 'areaspline'. chart.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".
var chart = {
type: 'areaspline'
};
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: '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]
}
]
};
}
Resultado
Verifique el resultado.