Gráfico de área con valores invertidos

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

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 ejes invertidos. También entenderemos la configuración adicional y agregaremos un atributo invertido en el gráfico.

gráficos

Configure el inverso del gráfico como verdadero.

Configure los ejes a invertir. Cuando el verdadero eje x es vertical y el eje y es horizontal. Si una serie de barras está presente en el gráfico, la misma se invertirá. Aquí, el valor predeterminado es falso.

chart.setInverted(true)

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

Resultado

Verifique el resultado.