Gráfico de burbujas con etiquetas de datos
A continuación se muestra un ejemplo de un gráfico de burbujas con etiquetas.
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 de burbujas con etiquetas de datos.
Configuraciones
Hemos usado BubbleChart clase para mostrar un gráfico de burbujas con etiquetas de datos.
// bubble chart
BubbleChart chart = new BubbleChart();
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.BubbleChart;
import com.googlecode.gwt.charts.client.corechart.BubbleChartOptions;
public class HelloWorld implements EntryPoint {
private BubbleChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new BubbleChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Id");
data.addColumn(ColumnType.NUMBER, "Age");
data.addColumn(ColumnType.NUMBER, "Weight");
data.addRow("Robert", 8, 12);
data.addRow("Mohan", 4, 8.5);
data.addRow("Ramesh", 11, 14);
data.addRow("Julie", 4, 5);
data.addRow("Sohan", 3, 3.5);
data.addRow("Karim", 6.5, 7);
BubbleChartOptions options = BubbleChartOptions.create();
options.setTitle("Age vs Weight");
// Draw the chart
chart.draw(data,options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Resultado
Verifica el resultado.