最大化/恢复窗口或拖动调整大小栏(SmartGWT)时图表无法正确呈现

时间:2012-06-21 19:23:59

标签: resize highcharts smartgwt

我是SmartGWT的新手并且长时间遇到这个问题并且无法修复它。

在我最大化/恢复窗口后,图表不在正确的位置并且没有调整大小,当我在窗口中拖动调整大小栏时存在同样的问题。然而,在我拖动窗口边缘后,即使只是一点点,图表也可以正确渲染。 (看起来有延迟或什么的)

我希望我的图表可以立即正确渲染窗口最大化/恢复,或者当我拖动调整大小栏时。不要每次都试图拖动窗口的边缘来纠正它。

请看下面的简单案例:(我使用HighCharts进行制图)

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test1 implements EntryPoint {

    public void onModuleLoad() {

        Window.enableScrolling(true);
        Window.setMargin("0px");

        HLayout mainLayout = new HLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        VLayout vl1 = new VLayout();
        vl1.setWidth(250);
        vl1.setHeight100();
        vl1.setShowResizeBar(true);

        VLayout vl2 = new VLayout();

        vl2.setWidth100();
        vl2.setHeight100();

        HLayout top = new HLayout();
        HLayout bottom = new HLayout();
        VLayout topLeft = new VLayout();
        VLayout topRight = new VLayout();
        VLayout bottomLeft = new VLayout();
        VLayout bottomRight = new VLayout();

        topLeft.addMember(drawCharts());
        topRight.addMember(drawCharts());
        bottomLeft.addMember(drawCharts());
        bottomRight.addMember(drawCharts());

        top.setMembers(topLeft, topRight);
        bottom.setMembers(bottomLeft, bottomRight);

        vl2.setMembers(top, bottom);

        mainLayout.setMembers(vl1, vl2);

        RootPanel.get().add(mainLayout);
    }

    private Chart drawCharts() {

        final Chart chart = new Chart()
                .setType(Series.Type.PIE)
                .setPlotBackgroundColor((String) null)
                .setPlotBorderWidth(null)
                .setPlotShadow(false)
                .setOption("/chart/marginTop", 0)
                .setOption("/chart/marginBottom", 10)
                .setPiePlotOptions(
                        new PiePlotOptions()
                                .setAllowPointSelect(true)
                                .setCursor(PlotOptions.Cursor.POINTER)
                                .setPieDataLabels(
                                        new PieDataLabels().setEnabled(false))
                                .setShowInLegend(true))
                .setToolTip(new ToolTip().setFormatter(new ToolTipFormatter() {
                    public String format(ToolTipData toolTipData) {
                        return "<b>" + toolTipData.getPointName() + "</b>: "
                                + toolTipData.getYAsDouble() + " %";
                    }
                }));
        chart.addSeries(chart
                .createSeries()
                .setName("Browser share")
                .setPoints(
                        new Point[] {
                                new Point("Firefox", 45.0),
                                new Point("IE", 26.8),
                                new Point("Chrome", 12.8).setSliced(true)
                                        .setSelected(true),
                                new Point("Safari", 8.5),
                                new Point("Opera", 6.2),
                                new Point("Others", 0.7) }));

        return chart;
    }
}

我是否需要添加调整大小处理程序来解决此问题?

或者它可能是图表布局的问题?我将区域划分为四个部分(top_left,top_right,bottom_left,bottom_right)并将图表放入每个部分。

任何人都知道如何解决这个困扰我很久的问题?赞赏。

1 个答案:

答案 0 :(得分:1)

首先,我相信您的浏览器份额不是很准确(笑)。

快速查看您的代码,似乎您将GWT图表与SmartGWT混合使用,而SmartGWT并未得到完全支持。

您必须在此处添加一些手动处理调整大小事件。

看一下这篇文章:

http://forums.smartclient.com/showthread.php?t=8159#aContainer

,简要说明就在这里:

http://forums.smartclient.com/showthread.php?t=8159#aMix