GWT Highcharts - Graphique en anneau

Voici un exemple de graphique en anneau.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique en anneau est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

graphique

Configurez le type de graphique pour qu'il soit basé sur un «secteur». chart.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

chart.setType(Type.PIE);

Exemple

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)  
         .setMargin(50, 0, 0, 0)  
         .setChartTitleText("Browser market shares at a specific website")  
         .setChartSubtitleText("Inner circle: 2008, outer circle: 2010")  
         .setPlotBackgroundColor("none")  
         .setPlotBorderWidth(0)  
         .setPlotShadow(false)  
         .setToolTip(new ToolTip()  
            .setFormatter(new ToolTipFormatter() {
            @Override
            public String format(ToolTipData toolTipData) {
               return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %"; 
            }
         }) 
      );

      chart.addSeries(chart.createSeries()  
         .setName("2008")  
         .setPlotOptions(new PiePlotOptions()  
            .setCenter(.5, .5)  
            .setSize(.45)  
            .setInnerSize(.20)  
            .setDataLabels(new DataLabels()  
               .setEnabled(false)  
            )  
         )  
         .setPoints(new Point[]{  
            new Point("Firefox", 44.2).setColor("#4572A7"),  
            new Point("IE", 46.6).setColor("#AA4643"),  
            new Point("Chrome", 3.1).setColor("#89A54E"),  
            new Point("Safari", 2.7).setColor("#80699B"),  
            new Point("Opera", 2.3).setColor("#3D96AE"),  
            new Point("Others", 0.4).setColor("#DB843D")  
         })  
      );  

      chart.addSeries(chart.createSeries()  
         .setName("2010")  
         .setPlotOptions(new PiePlotOptions()  
            .setCenter(.5, .5)  
            .setInnerSize(.45)  
            .setPieDataLabels(new PieDataLabels()  
               .setEnabled(true)  
               .setColor("#000000")  
               .setConnectorColor("#000000")  
            )  
         )  
         .setPoints(new Point[]{  
            new Point("Firefox", 45.0).setColor("#4572A7"),  
            new Point("IE", 26.8).setColor("#AA4643"),  
            new Point("Chrome", 12.8).setColor("#89A54E"),  
            new Point("Safari", 8.5).setColor("#80699B"),  
            new Point("Opera", 6.2).setColor("#3D96AE"),  
            new Point("Others", 0.2).setColor("#DB843D")  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.