Gráfico de splines con bandas de trazado

A continuación se muestra un ejemplo de un gráfico de splines con bandas de gráfico.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, comprendamos un ejemplo de un gráfico de splines con bandas de trazado donde se toman configuraciones / pasos adicionales.

Configuraciones

Configure las bandas usando la propiedad yAxis.plotBands. Establezca el rango de la banda usando la propiedad 'desde' y 'hasta'. Establezca el color de la banda usando la propiedad 'color'. Diseñe la etiqueta de la banda usando la propiedad 'etiqueta'.

yAxis

var yAxis = {
   title: {
      text: 'Wind speed (m/s)'
   },
   min: 0,
   minorGridLineWidth: 0,
   gridLineWidth: 0,
   alternateGridColor: null,
   plotBands: [
      { // Light air
         from: 0.3,
         to: 1.5,
         color: 'rgba(68, 170, 213, 0.1)',
         
         label: {
            text: 'Light air',
            style: {
               color: '#606060'
            }
         }
      }, 
      { // Light breeze
         from: 1.5,
         to: 3.3,
         color: 'rgba(0, 0, 0, 0)',
         
         label: {
            text: 'Light breeze',
            style: {
               color: '#606060'
            }
         }
      }, 
      { // Gentle breeze
         from: 3.3,
         to: 5.5,
         color: 'rgba(68, 170, 213, 0.1)',
         
         label: {
            text: 'Gentle breeze',
            style: {
               color: '#606060'
            }   
         }
      }, 
      { // Moderate breeze
         from: 5.5,
         to: 8,
         color: 'rgba(0, 0, 0, 0)',
         
         label: {
            text: 'Moderate breeze',
            style: {
               color: '#606060'
            }
         }
      }, 
      { // Fresh breeze
         from: 8,
         to: 11,
         color: 'rgba(68, 170, 213, 0.1)',
         
         label: {
            text: 'Fresh breeze',
            style: {
               color: '#606060'
            }
         }
      }, 
      { // Strong breeze
         from: 11,
         to: 14,
         color: 'rgba(0, 0, 0, 0)',
         
         label: {
            text: 'Strong breeze',
            style: {
               color: '#606060'
            }
         }   
      }, 
      { // High wind
         from: 14,
         to: 15,
         color: 'rgba(68, 170, 213, 0.1)',
         
         label: {
            text: 'High wind',
            style: {
               color: '#606060'
            }
         }
      }
   ]
};

Ejemplo

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as highchartsTreemap from 'highcharts/modules/treemap';
highchartsTreemap(Highcharts);
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      chart : {
         type: 'spline'      
      }, 
      title : {
         text: 'Wind speed during two days'   
      },
      subtitle : {
         text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
      },
      xAxis : {
         type: 'datetime',
         labels: {
            overflow: 'justify'
         }
      },
      yAxis : {
         title: {
            text: 'Wind speed (m/s)'
         },
         min: 0,
         minorGridLineWidth: 0,
         gridLineWidth: 0,
         alternateGridColor: null,
         plotBands: [
            { // Light air
               from: 0.3,
               to: 1.5,
               color: 'rgba(68, 170, 213, 0.1)',
               label: {
                  text: 'Light air',
                  style: {
                     color: '#606060'
                  }
               }
            }, 
            { // Light breeze
               from: 1.5,
               to: 3.3,
               color: 'rgba(0, 0, 0, 0)',
               label: {
                  text: 'Light breeze',
                  style: {
                     color: '#606060'
                  }
               }
            }, 
            { // Gentle breeze
               from: 3.3,
               to: 5.5,
               color: 'rgba(68, 170, 213, 0.1)',
               label: {
                  text: 'Gentle breeze',
                  style: {
                     color: '#606060'
                  }   
               }
            }, 
            { // Moderate breeze
               from: 5.5,
               to: 8,
               color: 'rgba(0, 0, 0, 0)',
               label: {
                  text: 'Moderate breeze',
                  style: {
                     color: '#606060'
                  }
               }
            }, 
            { // Fresh breeze
               from: 8,
               to: 11,
               color: 'rgba(68, 170, 213, 0.1)',
               label: {
                  text: 'Fresh breeze',
                  style: {
                     color: '#606060'
                  }
               }
            }, 
            { // Strong breeze
               from: 11,
               to: 14,
               color: 'rgba(0, 0, 0, 0)',
               label: {
                  text: 'Strong breeze',
                  style: {
                     color: '#606060'
                  }
               }   
            }, 
            { // High wind
               from: 14,
               to: 15,
               color: 'rgba(68, 170, 213, 0.1)',
               label: {
                  text: 'High wind',
                  style: {
                     color: '#606060'
                  }
               }
            }
         ]
      },
      tooltip : {
         valueSuffix: ' m/s'
      },
      plotOptions : {
         spline: {
            lineWidth: 4,
            states: {
               hover: {
                  lineWidth: 5
               }
            },
            marker: {
               enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
         }
      },
      series : [
         {
            name: 'Vik i Sogn',      
            data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
               7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
               8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
               7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
               3.0, 3.0]
         }, 
         {
            name: 'Norway',
            data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
               0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
               0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
               3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
         }
      ],     
      navigation : {
         menuItemStyle: {
            fontSize: '10px'
         }
      }    
   };
}

Resultado

Verifique el resultado.