Graphique en aires avec valeurs inversées

Voici un exemple de graphique en aires avec des valeurs inversées.

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 axes inversés. Nous comprendrons également la configuration supplémentaire et ajouterons un attribut inversé dans le graphique.

graphiques

Configurez l'inversé du graphique comme vrai.

Configurez les axes à inverser. Lorsque le vrai axe x est vertical et l'axe y est horizontal. Si une série de barres est présente dans le graphique, la même chose sera inversée. Ici, la valeur par défaut est false.

chart.setInverted(true)

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.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.Style;

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.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 com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)  
         .setInverted(true)
         .setChartTitleText("Average fruit consumption during one week")  
         .setChartSubtitle(new ChartSubtitle()  
            .setStyle(new Style()
               .setPosition("absolute")  
               .setRight("0px")  
               .setBottom("0px")  
            )
         )   
         .setLegend(new Legend()  
            .setLayout(Legend.Layout.VERTICAL)  
            .setAlign(Legend.Align.RIGHT)  
            .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(  
               "Monday",  "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"  
            );  

         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[] {3, 4, 3, 5, 4, 10, 12})  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Jane")  
            .setPoints(new Number[] {1, 3, 4, 3, 3, 5, 4})  
         );  
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.