如何使用gwt-visualization API在GWT中创建饼图? [英] How to create Pie Chart in GWT using gwt-visualization api?
问题描述
。 。
-
gwt-visualization
是官方库,但尚未更新很长时间。 -
gwt-charts
是第三方库,功能更完整,并且已更新以支持最近添加的Google图表JavaScript库。
但是,您可以使用 gwt-visualization 相同的功能。 org / doc / latest / DevGuideCodingBasicsJSNI.htmlrel =nofollow> JSNI 。
最后,使用哪个库并不重要。您应该能够在两个库中实现相同的外观和行为。
一个重要的事情是加载 CoreChart.PACKAGE
而不是 PieChart.PACKAGE
并使用 com.google.gwt.visualization.client.visualizations.corechart.PieChart
而不是 com.google .gwt.visualization.client.visualizations.PieChart
:
VisualizationUtils.loadVisualizationApi(onLoadCallback,CoreChart.PACKAGE);
I'm trying to build a pie-chart. But i get two different kinds of charts with different jars, gwt-charts & gwt-visualization.
. charts image http://gwt-google-apis.googlecode.com/svn/wiki/SimpleVizQuery-1.png
This is generated using gwt-visualization.jar. But it only displays the detail when I click on it and not when i hover on it. And it has a few more flaws. . This is generated using gwt-charts.jar and this is what i want.
Problem is that I need to use gwt-visualization.jar, but I want the look and feel of gwt-charts.jar..
Is there any way for that?????
This is the code example:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Selection;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.PieChart;
import com.google.gwt.visualization.client.visualizations.PieChart.Options;
public class SimpleViz implements EntryPoint {
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
Panel panel = RootPanel.get();
// Create a pie chart visualization.
PieChart pie = new PieChart(createTable(), createOptions());
panel.add(pie);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
}
private Options createOptions() {
Options options = Options.create();
options.setWidth(400);
options.setHeight(240);
options.set3D(true);
options.setTitle("My Daily Activities");
return options;
}
private AbstractDataTable createTable() {
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Task");
data.addColumn(ColumnType.NUMBER, "Hours per Day");
data.addRows(2);
data.setValue(0, 0, "Work");
data.setValue(0, 1, 14);
data.setValue(1, 0, "Sleep");
data.setValue(1, 1, 10);
return data;
}
}
Both gwt-charts
and gwt-visualization
are simply GWT wrappers for the google chart javascript library.
gwt-visualization
is the official library but it hasn't been updated for a long time.gwt-charts
is a third party library and is more feature complete wrapper and has been updated to support the recent additions to the google chart javascript library.
But you can easily achieve the same thing withgwt-visualization
using JSNI.
In the end it doesn't really matter which library you use. You should be able to achieve the same looks and behavior with both libraries.
One important thing is to load the CoreChart.PACKAGE
instead of the PieChart.PACKAGE
and use the com.google.gwt.visualization.client.visualizations.corechart.PieChart
instead of the com.google.gwt.visualization.client.visualizations.PieChart
:
VisualizationUtils.loadVisualizationApi(onLoadCallback, CoreChart.PACKAGE);
这篇关于如何使用gwt-visualization API在GWT中创建饼图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!