响应Google图表与GWT

Question

我正在尝试在GWT应用中创建响应式Google图表。 通过响应，我的意思是它适应浏览器大小的宽度（可能也是高度）。 您可以在此处检查此行为。

有人建议如何做到这一点 ，但这是以Google Charts Javascript版本的形式出现的，而不是GWT版本。 在GWT中，Options对象具有一个期望值和int值的setWidth方法，因此，此处不允许使用百分比。 我试图使用更通用的属性规范过程：

 Options options = Options.create();
 //options.setWidth(600);
 options.set("width", "100%");

但这导致图表根本没有绘图......对我来说，似乎如果未指定宽度，则根本不会绘制。

我想我可以尝试捕获window.resize事件，但我不确定如何在GWT中从Java客户端执行此操作...任何想法/建议？

谢谢！ 亚历克斯

Answer 1

不幸的是，百分比维度不适用于谷歌图表工具。 您必须指定显式尺寸。
有一些解决方法可以使图表在GWT中响应。

• 使用非官方GWT图表工具包装器gwt-charts工具。 它支持开箱即用的响应式图表。 除此之外，它还具有用于图表工具（DataRoles，Controls和Dashboard等）的新增功能的包装器。 官方包装器多年来没有任何更新。
• 扩展官方图表包装并添加响应功能。

解：

ResponsiveColumnChart extends ColumnChart implements RequiresResize {

    protected Options options;
    protected AbstractDataTable data;

    public ResizeableColumnChart(AbstractDataTable data, Options options) {
        super(data, options);
        this.data = data;
        this.options = options;
    }

    @Override
    public void onResize() {
        options.setWidth(getParent().getOffsetWidth());
        options.setHeight(getParent().getOffsetHeight());
        draw(data, options);
    }

    public void draw2(AbstractDataTable data2, Options options) {
        this.data = data2;
        this.options = options;
        draw(data2,options);
    }
}

这在某种程度上是一种黑客攻击，因为Options和AbstractDataTable在官方包装器中是私有的。 因此，您必须将它们再次添加到扩展类才能访问它们。 此外，官方的onLoad()方法将Options和AbstractDataTable为null，因此您无法在onResize()方法中访问它们。

当然，为了正常工作，你必须在新的图表添加到LayoutPanel或实现面板ProvidesResize否则onResize()方法没有被调用。

• 分叉官方GWT图表包装并直接在那里添加上述功能。

我建议切换到gwt-charts包装，因为它比GWT的过时官方谷歌图表包装更新。