GWT Highcharts - Spline con ejes invertidos

Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Highcharts . Consideremos ahora el siguiente ejemplo para comprender mejor una spline con ejes invertidos.

Configuraciones

Configure el tipo de gráfico para que esté basado en splines. chart.type decide el tipo de serie para el gráfico. Aquí, el valor predeterminado es "línea". Configure los ejes a invertir. Cuando el eje x verdadero es vertical y el eje y es horizontal, si hay una serie de barras en el gráfico, la misma se invertirá. Aquí, el valor predeterminado es falso.

chart.setType(Series.Type.SPLINE)
.setInverted(true)

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Color;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series;
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.XAxisLabels;
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 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(Series.Type.SPLINE)
         .setInverted(true)
         .setChartTitleText("Atmosphere Temperature by Altitude")
         .setChartSubtitleText("According to the Standard Atmosphere Model")
         .setLegend(new Legend()
         .setEnabled(false))  
         .setToolTip(new ToolTip()  
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return toolTipData.getXAsLong() + " km: " + toolTipData.getYAsDouble() + "°C";  
               }
            })
         )
         .setLegend(new Legend()
            .setEnabled(false)
         )
         .setAreaPlotOptions(new AreaPlotOptions()
            .setFillColor(new Color()
               .setLinearGradient(0, 0, 0, 1)
               .addColorStop(0, 69, 114, 167)  
               .addColorStop(1, 2, 0, 0, 0)  
            )
            .setMarker(new Marker()  
               .setEnabled(false)  
               .setHoverState(new Marker()  
                  .setEnabled(true)  
                  .setRadius(5)  
               )  
            )  
            .setShadow(false)  
            .setHoverStateLineWidth(1)  
         );  

      chart.getXAxis()
         .setReversed(false)  
         .setAxisTitleText("Altitude")  
         .setMaxPadding(0.05)  
         .setShowLastLabel(true)  
         .setLabels(new XAxisLabels()  
            .setFormatter(new AxisLabelsFormatter() {
               @Override
               public String format(AxisLabelsData axisLabelsData) {
                  return axisLabelsData.getValueAsLong() + "km";  
               }
            })
         );

      chart.getYAxis()
         .setAxisTitleText("Temperature")
         .setLineWidth(2)  
         .setLabels(new YAxisLabels()
            .setFormatter(new AxisLabelsFormatter() {
               @Override
               public String format(AxisLabelsData axisLabelsData) {
                  return axisLabelsData.getValueAsLong() + "°";  
               }
            })
         );

      chart.addSeries(chart.createSeries()
         .setName("Temperature") 
         .setPoints(new Number[][]{  
            {0, 15}, {10, -50}, {20, -56.5}, {30, -46.5}, {40, -22.1},  
            {50, -2.5}, {60, -27.7}, {70, -55.7}, {80, -76.5}  
         })  
      ); 
      RootPanel.get().add(chart);
   }  
}

Resultado

Verifique el resultado.