Graphique avec colonne, ligne et secteur

Voici un exemple de graphique avec colonne, ligne et secteur.

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

Un exemple de graphique combiné comportant des colonnes, des lignes et des secteurs est donné ci-dessous.

Configurations

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

séries

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

chart.addSeries(chart.createSeries()  
   .setType(Type.COLUMN)  
);

Exemple

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.LabelItem;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
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.plotOptions.PiePlotOptions;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setChartTitleText("Combination chart")  
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  String s;  
                  if (toolTipData.getPointName() != null) { // the pie chart  
                     s = toolTipData.getPointName() + ": " +  
                     toolTipData.getYAsLong() + " fruits";  
                  } else {  
                     s = toolTipData.getXAsString() + ": " +  
                     toolTipData.getYAsLong();  
                  }  
                  return s;
               }
            })
         )
         .setLabelItems(new  LabelItem()
            .setHtml("Total fruit consumption")  
            .setStyle(new Style()  
               .setLeft("40px")  
               .setTop("8px")  
               .setColor("black")  
            )  
         );
      chart.getXAxis()  
         .setCategories("Apples", "Oranges", "Pears", "Bananas", "Plums");  

      chart.addSeries(chart.createSeries()  
         .setName("Jane")  
         .setType(Series.Type.COLUMN)  
         .setPoints(new Number[]{3, 2, 1, 3, 4})  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("John")  
         .setType(Series.Type.COLUMN)  
         .setPoints(new Number[]{2, 3, 5, 7, 6})  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Joe")  
         .setType(Series.Type.COLUMN)  
         .setPoints(new Number[]{4, 3, 3, 9, 0})  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Average")  
         .setType(Series.Type.SPLINE)  
         .setPoints(new Number[]{3, 2.67, 3, 6.33, 3.33})  
      );  

      chart.addSeries(chart.createSeries()  
         .setName("Total consumption")  
         .setType(Series.Type.PIE)  
         .setPoints(new Point[]{  
            new Point("Jane", 13),  
            new Point("John", 23),  
            new Point("Joe", 19)  
         })  
         .setPlotOptions(new PiePlotOptions()  
            .setCenter(100, 80)  
            .setSize(100)  
            .setShowInLegend(false)  
            .setDataLabels(new DataLabels()  
               .setEnabled(false)  
            )  
         ));  
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.