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 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 con valores perdidos. Hemos agregado el atributo spacingBottom en el gráfico.

gráficos

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).

chart.setSpacingBottom(30);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.ChartSubtitle;
import org.moxieapps.gwt.highcharts.client.ChartTitle.Align;
import org.moxieapps.gwt.highcharts.client.ChartTitle.VerticalAlign;
import org.moxieapps.gwt.highcharts.client.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;

import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;

import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;

import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)  
         .setChartTitleText("Fruit consumption *")  
         .setChartSubtitle(new ChartSubtitle()  
            .setText("* Jane's banana consumption is unknown")  
            .setFloating(true)  
            .setAlign(Align.RIGHT)  
            .setVerticalAlign(VerticalAlign.BOTTOM)  
            .setY(15)  
         )  
         .setSpacingBottom(30)  
         .setLegend(new Legend()  
            .setLayout(Legend.Layout.VERTICAL)  
            .setAlign(Legend.Align.LEFT)  
            .setVerticalAlign(Legend.VerticalAlign.TOP)  
            .setX(150)  
            .setY(100)  
            .setFloating(true)  
            .setBorderWidth(1)  
            .setBackgroundColor("#FFFFFF")  
         )  
         .setToolTip(new ToolTip()  
            .setFormatter(  
               new ToolTipFormatter() {  
                  public String format(ToolTipData toolTipData) {  
                     return "<b>" + toolTipData.getSeriesName() + "</b<<br/>" +  
	                     toolTipData.getXAsString() + ": " + toolTipData.getYAsLong();  
                  }  
               }  
            )  
         )  
         .setCredits(new Credits()  
            .setEnabled(false)  
         )  
         .setAreaPlotOptions(new AreaPlotOptions()  
            .setFillOpacity(0.5)  
      );  

      chart.getXAxis()  
         .setCategories(  
            "Apples", "Pears", "Oranges", "Bananas", "Grapes", "Plums", "Strawberries", "Raspberries"  
         );  

      chart.getYAxis()  
         .setAxisTitleText("Y-Axis")  
         .setLabels(new YAxisLabels()  
         .setFormatter(new AxisLabelsFormatter() {  
            public String format(AxisLabelsData axisLabelsData) {  
               return String.valueOf(axisLabelsData.getValueAsLong());  
            }  
         })  
      );  

      chart.addSeries(chart.createSeries()  
         .setName("John")  
         .setPoints(new Number[] {0, 1, 4, 4, 5, 2, 3, 7})  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Jane")  
         .setPoints(new Number[] {1, 0, 3, null, 3, 1, 2, 1})  
      );  
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.