Grafico ad area con valori mancanti

Di seguito è riportato un esempio di un grafico ad area con valori mancanti.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora un esempio di un grafico ad area con valori mancanti. Abbiamo aggiunto l'attributo spacingBottom nel grafico.

grafici

Configura il file spacingBottom del grafico come 30. Significa lo spazio tra il bordo inferiore del grafico e il contenuto (area del tracciato, titolo ed etichette dell'asse, titolo, sottotitolo o legenda nella posizione superiore).

chart.setSpacingBottom(30);

Esempio

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);
   }
}

Risultato

Verifica il risultato.