Gráfico con columna, línea y circular

A continuación se muestra un ejemplo de un gráfico con columna, línea y circular.

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 muestra un ejemplo de un gráfico de combinación que tiene Columna, Línea y Circular.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en la dispersión. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

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

Ejemplo

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);
   }
}

Resultado

Verifique el resultado.