基于GWT的java响应谷歌图表

Question

我正试图在GWT应用程序中创建一个响应良好的谷歌图表。通过响应，我的意思是它根据浏览器大小调整宽度（可能也调整高度）。你可以检查这个行为here

有些人建议如何做this，但这是谷歌图表Javascript版本的形式，而不是GWT版本。在GWT中，Options对象有一个setWidth方法，该方法需要和int值，因此这里不允许使用百分比。我尝试使用更通用的属性规范过程：

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

但这会导致图表根本无法绘制。。。在我看来，如果不指定宽度，就根本不会绘制

我想我可以试着抓住窗户。调整事件大小，但我不确定如何在GWT中从Java客户端执行此操作。。。有什么想法/建议吗

谢谢！ 亚历克斯

Answer 1

遗憾的是，百分比维度无法与谷歌图表工具配合使用。必须指定明确的尺寸标注
在GWT中，有几个变通方法可以使图表响应

• 使用非官方的GWT图表工具包装gwt-charts工具。它支持即时响应的图表。除此之外，它还为图表工具（DataRoles、控件和仪表板等）添加了包装器。官方包装已经多年没有更新了
• 扩展官方图表包装并添加响应功能

解决方案：

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图表包装器，因为它比官方的gwt谷歌图表包装器更新