GWT Highcharts - Gráfico circular básico

A continuación se muestra un ejemplo de gráfico circular.

Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico circular básico. También entenderemos la configuración adicional. Hemos cambiado el atributo de tipo en el gráfico.

gráfico

Configure el tipo de gráfico para que se base en "tarta". chart.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

chart.setType(Type.PIE);

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.Point;
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.DataLabels;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
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 org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Cursor;

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.PIE)  
         .setChartTitleText("Browser market shares at a specific website, 2010")  
         .setPlotBackgroundColor((String)null)
         .setPlotBorderWidth(null)  
         .setPlotShadow(false) 
         .setPiePlotOptions(new PiePlotOptions()
            .setAllowPointSelect(true)  
            .setCursor(Cursor.POINTER)  
            .setPieDataLabels(new PieDataLabels()
               .setConnectorColor("#000000")  
               .setEnabled(true)  
               .setColor("#000000")
               .setFormatter(new DataLabelsFormatter() {									
                  @Override
                  public String format(DataLabelsData dataLabelsData) {
                     return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %";
                  }
               })
            )
         )
         .setLegend(new Legend()  
            .setLayout(Legend.Layout.VERTICAL)  
            .setAlign(Legend.Align.RIGHT)  
            .setVerticalAlign(Legend.VerticalAlign.TOP)  
            .setX(-100)  
            .setY(100)  
            .setFloating(true)  
            .setBorderWidth(1)  
            .setBackgroundColor("#FFFFFF")  
            .setShadow(true)
         )  
         .setToolTip(new ToolTip()  
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %"; 
               }
            }) 
         );

         chart.addSeries(chart.createSeries()  
            .setName("Browser share")  
            .setPoints(new Point[]{  
               new Point("Firefox", 45.0),  
               new Point("IE", 26.8),  
               new Point("Chrome", 12.8)  
                  .setSliced(true)  
                  .setSelected(true),  
               new Point("Safari", 8.5),  
               new Point("Opera", 6.2),  
               new Point("Others", 0.7)  
            })              
         );	        
      RootPanel.get().add(chart);
   }
}

Resultado

Verifica el resultado.