Highcharts de GWT: rango de columnas

A continuación se muestra un ejemplo de un gráfico de columnas que utiliza rangos.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico de columnas que utiliza rangos.

Configuraciones

Veamos ahora configuraciones adicionales.

gráfico

Configure el tipo de gráfico para que esté basado en 'rango de columnas'. chart.type decide el tipo de serie para el gráfico. El valor predeterminado es "línea".

chart.setType(Type.COLUMN_RANGE)

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

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

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_RANGE)  
         .setChartTitleText("Temperature variation by month")  
         .setChartSubtitleText("Observed in Vik i Sogn, Norway, 2009")  
         .setInverted(true)  
         .setLegend(new Legend()  
            .setEnabled(false)  
         )  
         .setToolTip(new ToolTip()  
            .setValueSuffix("°C")  
         )  
         .setColumnRangePlotOptions(new ColumnRangePlotOptions()
            .setDataLabels(new DataLabels()
               .setEnabled(true)
               .setY(0)
               .setFormatter(new DataLabelsFormatter() {
                  @Override
                  public String format(DataLabelsData dataLabelsData) {
                     return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble()) + " °C";
                  }
               })
            )
         );
      
         chart.getXAxis()  
            .setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"  
         )
         .setLabels(new XAxisLabels()  
            .setRotation(-45)  
            .setAlign(Align.RIGHT)  
            .setStyle(new Style()  
               .setFont("normal 13px Verdana, sans-serif")  
            )  
         );  
         chart.getYAxis()	           
            .setMin(0)  
            .setAxisTitleText("Temperature ( °C )"); 

         chart.addSeries(chart.createSeries()  
            .setName("Temperatures")  
            .setPoints(new Number[][]{  
               {-9.7, 9.4},  
               {-8.7, 6.5},  
               {-3.5, 9.4},  
               {-1.4, 19.9},  
               {0.0, 22.6},  
               {2.9, 29.5},  
               {9.2, 30.7},  
               {7.3, 26.5},  
               {4.4, 18.0},  
               {-3.1, 11.4},  
               {-5.2, 10.4},  
               {-13.5, 9.8}  
            })              
         );	        
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.