0

我正在尝试使用 gwt-google-apis 创建圆环图。据我了解， 它是一个带有“pieHole”选项的普通饼图（它的值应该在 0.0 和 1.0 之间）。还有一个限制是甜甜圈不支持“is3D”选项。

我遵循gwt-google-apis 参考并编写了以下代码：

public void onModuleLoad() {

    Runnable onLoadCallback = new Runnable() {
        public void run() {
            Panel panel = RootPanel.get();
            PieChart pie = new PieChart(createTable(), createOptions());
            panel.add(pie);

        }
    };
    VisualizationUtils.loadVisualizationApi(onLoadCallback,
            PieChart.PACKAGE);

}

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

private Options createOptions() {
    Options options = Options.create();
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("My Daily Activities");
    options.setOption("pieHole", "0.4");
    return options;
}

但是，我收到了没有洞的普通饼图（我只在开发模式下运行它）。有什么建议么？也许我错过了什么？

4

4 回答 4

2

查看最新稳定版本 gwt-visualization-1.1.2 的 API，该功能不存在。您可以设置的特定于饼图的唯一选项是：

 void   set3D(boolean is3D) 

 void   setPieResidueSliceLabel(java.lang.String label) 

 void   setPieSliceText(java.lang.String text) 

 void   setPieSliceTextStyle(TextStyle textStyle) 

 void   setSliceVisibilityThreshold(double angle)

您可以添加问题或自己编写功能，将 JSNI 方法添加到 PieChart.PieOptions 。如果您对此不熟悉，请查看GWTProject 。

于 2013-08-27T11:18:11.767 回答
1

您可以使用 GWT-API 创建圆环图，您必须像这样为 PieChartOptions 编写 Wrapper

PieOpt.java

import com.google.gwt.core.client.JsArray;
import com.googlecode.gwt.charts.client.corechart.PieChartOptions;
import com.googlecode.gwt.charts.client.corechart.PieChartTooltip;
import com.googlecode.gwt.charts.client.options.BackgroundColor;
import com.googlecode.gwt.charts.client.options.ChartArea;
import com.googlecode.gwt.charts.client.options.Legend;
import com.googlecode.gwt.charts.client.options.PieSliceText;
import com.googlecode.gwt.charts.client.options.Slice;
import com.googlecode.gwt.charts.client.options.TextStyle;

public class PieOpt {
    private PieChartOptions _this;

    private PieOpt() {
        _this = PieChartOptions.create();
    }

    public static PieOpt newInstance() {
        return new PieOpt();
    }

    public PieChartOptions get() {
        return _this;
    }

    public final void setBackgroundColor(BackgroundColor backgroundColor) {
        _this.setBackgroundColor(backgroundColor);
    }

    public final void setBackgroundColor(String color) {
        _this.setBackgroundColor(color);
    }

    public final void setChartArea(ChartArea chartArea) {
        _this.setChartArea(chartArea);
    }

    public final void setColors(String... colors) {
        _this.setColors(colors);
    }

    public final void setFontName(String name) {
        _this.setFontName(name);
    }

    public final void setFontSize(double size) {
        _this.setFontSize(size);
    }

    public final void setIs3D(boolean is3D) {
        _this.setIs3D(is3D);
    }

    public final void setLegend(Legend legend) {
        _this.setLegend(legend);
    }

    public final void setPieResidueSliceColor(String pieResidueSliceColor) {
        _this.setPieResidueSliceColor(pieResidueSliceColor);
    }

    public final void setPieResidueSliceLabel(String pieResidueSliceLabel) {
        _this.setPieResidueSliceLabel(pieResidueSliceLabel);
    }

    public final void setPieSliceBorderColor(String pieSliceBorderColor) {
        _this.setPieSliceBorderColor(pieSliceBorderColor);
    }

    public final void setPieSliceText(PieSliceText pieSliceText) {
        _this.setPieSliceText(pieSliceText);
    }

    public final void setPieSliceTextStyle(TextStyle pieSliceTextStyle) {
        _this.setPieSliceTextStyle(pieSliceTextStyle);
    }

    public final void setReverseCategories(boolean reverseCategories) {
        _this.setReverseCategories(reverseCategories);
    }

    public final void setSlices(JsArray<Slice> slices) {
        _this.setSlices(slices);
    }

    public final void setSliceVisibilityThreshold(
            double sliceVisibilityThreshold) {
        _this.setSliceVisibilityThreshold(sliceVisibilityThreshold);
    }

    public final void setTitle(String title) {
        _this.setTitle(title);
    }

    public final void setTitleTextStyle(TextStyle textStyle) {
        _this.setTitleTextStyle(textStyle);
    }

    public final void setTooltip(PieChartTooltip tooltip) {
        _this.setTooltip(tooltip);
    }

    public void setHole(double d) {
        setHole(get(), d);
    }

    private final native void setHole(PieChartOptions chartOptions, double d) /*-{
        chartOptions.pieHole = d;
    }-*/;
}

并像这样使用它

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
        chartLoader.loadApi(new Runnable() {
            @Override
            public void run() {
                pieChart = new PieChart();

                   DataTable dataTable = DataTable.create();
                                    dataTable.addColumn(ColumnType.STRING, "Name");
                                    dataTable.addColumn(ColumnType.NUMBER, "Donuts eaten");
                                    dataTable.addRows(4);
                                    dataTable.setValue(0, 0, "Michael");
                                    dataTable.setValue(1, 0, "Elisa");
                                    dataTable.setValue(2, 0, "Robert");
                                    dataTable.setValue(3, 0, "John");
                                    dataTable.setValue(0, 1, 5);
                                    dataTable.setValue(1, 1, 7);
                                    dataTable.setValue(2, 1, 3);
                                    dataTable.setValue(3, 1, 2);



               PieOpt opt = PieOpt.newInstance();
        opt.setHole(0.4);
        pieChart.draw(dataTable, opt.get());

            }
        });

你完成了。

于 2014-01-10T09:12:46.017 回答
0

尝试这个：

FacetChart chart=new FacetChart();
chart.setData(ChartData.getData());  
chart.setFacets(new Facet("region", "Region"),new Facet("time", "Period"));  
chart.setValueProperty("value");  

chart.setTitle("Revenue");

chart.setChartType(ChartType.DOUGHNUT);
于 2015-06-30T18:35:17.777 回答
0

这是一个工作示例：

private PieChart.PieOptions createPieOptions() {
    PieChart.PieOptions options = PieChart.createPieOptions();
    options.set("pieHole", "0.4");

    return options;
}

private AbstractDataTable createPieTable() {
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, LABEL);
    data.addColumn(ColumnType.NUMBER, VALUE);

    data.addRows(2);
    data.setValue(0, 0, "example");
    data.setValue(0, 1, "12");
    data.setValue(1, 0, "example number two");
    data.setValue(1, 1, "88");
    }

    return data;
}

PieChart tagsPie = new PieChart(createPieTable(), createPieOptions());
于 2015-10-29T13:23:48.093 回答