Graphique en aires avec valeurs manquantes

Voici un exemple de graphique en aires avec des valeurs manquantes.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant un exemple de graphique en aires avec des valeurs manquantes. Nous avons ajouté l'attribut spacingBottom dans le graphique.

graphiques

Configurer le spacingBottom du graphique comme 30. Cela signifie l'espace entre le bord inférieur du graphique et le contenu (zone de tracé, titre et étiquettes de l'axe, titre, sous-titre ou légende en haut).

chart.setSpacingBottom(30);

Exemple

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

Résultat

Vérifiez le résultat.