Highcharts de GWT: columna con etiquetas giradas

A continuación se muestra un ejemplo de un gráfico de columnas con etiquetas giradas.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Veamos ahora configuraciones adicionales y también cómo hemos agregado el atributo de rotación en dataLabels.

A continuación se muestra un ejemplo de un gráfico de columnas con etiquetas giradas.

dataLabels

dataLabels es un objeto contenedor para manejar etiquetas de datos dentro de gráficos.

Rotación de texto en grados. Tenga en cuenta que debido a una estructura más compleja, los fondos, los bordes y el relleno se perderán en una etiqueta de datos rotada. Este valor predeterminado es 0.

chart.addSeries(chart.createSeries()  
   .setName("Population")  
   .setPoints(new Number[] { 34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,  
      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,  
      11.7, 11.2  })             
   )
   .setColumnPlotOptions(new ColumnPlotOptions()
      .setDataLabels(new DataLabels()
      .setEnabled(true)
      .setRotation(-90)
      .setColor("#FFFFFF")
      .setAlign(Align.RIGHT)
      .setX(-3)
      .setY(10)
      .setFormatter(new DataLabelsFormatter() {
         @Override
         public String format(DataLabelsData dataLabelsData) {
            return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble());
         }
      })
     .setStyle(new Style()
        .setFont("normal 13px Verdana, sans-serif")
     )
   )
);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
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.Labels.Align;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.XAxisLabels;

import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setType(Type.COLUMN)  
         .setChartTitleText("World's largest cities per 2008")  
         .setMargin(50, 50, 100, 80)
         .setToolTip(new ToolTip()
         .setFormatter(new ToolTipFormatter() {							
            @Override
            public String format(ToolTipData toolTipData) {
               return "<b>" + toolTipData.getXAsString() + "</b><br/>" +  
                  "Population in 2008: " +  
                  NumberFormat.getFormat("0.0").format(toolTipData.getYAsDouble()) +  
                  " millions";  
            }
         })
      );

       chart.getXAxis()  
         .setCategories("Tokyo", "Jakarta", "New York", "Seoul", "Manila", "Mumbai", "Sao Paulo",  
         "Mexico City", "Dehli", "Osaka", "Cairo", "Kolkata", "Los Angeles", "Shanghai",  
         "Moscow", "Beijing", "Buenos Aires", "Guangzhou", "Shenzhen", "Istanbul" )
         .setLabels(new XAxisLabels()  
         .setRotation(-45)  
         .setAlign(Align.RIGHT)  
         .setStyle(new Style()  
            .setFont("normal 13px Verdana, sans-serif")  
         )  
      );  
      chart.getYAxis()	           
         .setMin(0)  
         .setAxisTitleText("Population (millions)");  

      chart.addSeries(chart.createSeries()  
         .setName("Population")  
         .setPoints(new Number[] { 34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,  
            17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,  
            11.7, 11.2  })             
      ).setColumnPlotOptions(new ColumnPlotOptions()
         .setDataLabels(new DataLabels()
            .setEnabled(true)
            .setRotation(-90)
            .setColor("#FFFFFF")
            .setAlign(Align.RIGHT)
            .setX(-3)
            .setY(10)
            .setFormatter(new DataLabelsFormatter() {
               @Override
               public String format(DataLabelsData dataLabelsData) {
                  return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble());
               }
            })
            .setStyle(new Style()
               .setFont("normal 13px Verdana, sans-serif")
            )
         )
      );
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.