Gráfico circular con rebanadas explosionadas

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

Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico circular con porciones explosionadas.

Configuraciones

Hemos usado slices configuración para mostrar un gráfico circular con sectores ampliados.

Slice slice1 = Slice.create();
slice1.setOffset(0.2);
Slice slice2 = Slice.create();

slice2.setOffset(0.3);
options.setSlice(1, slice1);
options.setSlice(3, slice2);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

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

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;
import com.googlecode.gwt.charts.client.corechart.PieChartOptions;
import com.googlecode.gwt.charts.client.options.Slice;

public class HelloWorld implements EntryPoint {
   private PieChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new PieChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Browser");
      data.addColumn(ColumnType.NUMBER, "Percentage");
      
      data.addRow("Firefox", 45.0);
      data.addRow("IE", 26.8);
      data.addRow("Chrome", 12.8);
      data.addRow("Safari", 8.5);
      data.addRow("Opera", 6.2);
      data.addRow("Others", 0.7);
      PieChartOptions options = PieChartOptions.create();

      options.setTitle("Browser market shares at a specific website, 2014");
      Slice slice1 = Slice.create();
      slice1.setOffset(0.2);
      Slice slice2 = Slice.create();
      
      slice2.setOffset(0.3);
      options.setSlice(1, slice1);
      options.setSlice(3, slice2);
      
      // Draw the chart
      chart.draw(data,options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Resultado

Verifique el resultado.