GWT Highcharts - Spline com eixos invertidos
Já vimos a configuração usada para desenhar este gráfico no capítulo Highcharts Configuration Syntax . Vamos agora considerar o exemplo a seguir para entender melhor um Spline com eixos invertidos.
Configurações
Configure o tipo de gráfico para ser baseado em splines. chart.type decide o tipo de série do gráfico. Aqui, o valor padrão é "linha". Configure os eixos a serem invertidos. Quando o eixo x verdadeiro é vertical e o eixo y é horizontal - se uma série de barras estiver presente no gráfico, a mesma será invertida. Aqui, o valor padrão é falso.
chart.setType(Series.Type.SPLINE)
.setInverted(true)
Exemplo
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 o resultado.