Highcharts - Gráfico de área con valores perdidos

A continuación se muestra un ejemplo de un gráfico de áreas con valores perdidos.

Ya hemos visto la configuración utilizada 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 con valores perdidos.

Hemos agregado el atributo spacingBottom en el gráfico.

gráfico

Configurar el spacingBottom del gráfico como 30. Significa el espacio entre el borde inferior del gráfico y el contenido (área del gráfico, título y etiquetas del eje, título, subtítulo o leyenda en la posición superior).

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

Ejemplo

highcharts_area_missing.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'area',
               spacingBottom: 30
            };
            var title = {
               text: 'Fruit consumption *'   
            }; 
            var subtitle = {
               text: '* Jane\'s banana consumption is unknown',
               floating: true,
               align: 'right',
               verticalAlign: 'bottom',
               y: 15
            };
            var legend = {
               layout: 'vertical',
               align: 'left',
               verticalAlign: 'top',
               x: 150,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 
                     '#FFFFFF'
            };
            var xAxis = {
               categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes',
                  'Plums', 'Strawberries', 'Raspberries']      
            };
            var yAxis = {
               title: {
                  text: 'Y-Axis'
               },
               labels: {
                  formatter: function () {
                     return this.value;
                  }
               }
            };
            var tooltip = {
               formatter: function () {
                  return '<b>' + this.series.name + '</b><br/>' +
                     this.x + ': ' + this.y;
               }
            };
            var plotOptions = {
               area: {
                  fillOpacity: 0.5
               }
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'John',
                  data: [0, 1, 4, 4, 5, 2, 3, 7]
               }, 
               {
                  name: 'Jane',
                  data: [1, 0, 3, null, 3, 1, 2, 1]
               }
            ];     
      
            var json = {};   
            json.chart = chart; 
            json.title = title; 
            json.subtitle = subtitle; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;
            json.tooltip = tooltip;
            json.plotOptions = plotOptions;
            json.credits = credits;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifica el resultado.

↰ Previous page