GWT Highcharts - Spline con assi invertiti

Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Highcharts . Consideriamo ora il seguente esempio per comprendere ulteriormente una Spline con assi invertiti.

Configurazioni

Configurare il tipo di grafico in modo che sia basato su spline. chart.type decide il tipo di serie per il grafico. Qui, il valore predefinito è "line". Configurare gli assi da invertire. Quando l'asse x vero è verticale e l'asse y è orizzontale, se nel grafico è presente una serie di barre, la stessa verrà invertita. Qui, il valore predefinito è false.

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

Esempio

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

Risultato

Verifica il risultato.