Question

我正在尝试建立一个饼图。但我得到两种不同的图表，包括不同的罐子，gwt-charts＆amp; GWT-可视化。

。 charts image http://gwt-google-apis.googlecode.com/svn/wiki/SimpleVizQuery-1.png

这是使用gwt-visualization.jar生成的。但它只显示我点击它时的细节，而不是当我将鼠标悬停在它上面时。它还有一些缺陷。。 visualization image 这是使用gwt-charts.jar生成的，这就是我想要的。

问题是我需要使用gwt-visualization.jar，但我想要gwt-charts.jar的外观和感觉..

有什么办法吗？?????

这是代码示例：

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

Answer 1

gwt-charts和gwt-visualization都只是google chart javascript library的GWT包装器。

gwt-visualization是官方图书馆，但很长时间没有更新。
gwt-charts是第三方库，是功能更完整的包装器，已更新为支持最近添加到Google图表javascript库。
但您可以使用JSNI轻松地使用gwt-visualization实现相同的目标。

最后，您使用哪个库并不重要。您应该能够使用两个库实现相同的外观和行为。

一件重要的事情是加载CoreChart.PACKAGE而不是PieChart.PACKAGE并使用com.google.gwt.visualization.client.visualizations.corechart.PieChart代替com.google.gwt.visualization.client.visualizations.PieChart：

VisualizationUtils.loadVisualizationApi(onLoadCallback, CoreChart.PACKAGE);

如何使用gwt-visualization api在GWT中创建饼图？

1 个答案: