如何使用gwt-visualization API在GWT中创建饼图？ [英] How to create Pie Chart in GWT using gwt-visualization api?

问题描述

我试图建立一个饼图。但我得到两种不同的图表，不同的罐子，gwt-charts& gwt-visualization。

。 。

• 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-chartsis 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 with gwt-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.PACKAGEinstead 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屋！