java - 带有 GWT 的响应式 Google 图表

Question

我正在尝试在 GWT 应用程序中创建响应式 Google 图表。通过响应式，我的意思是它会根据浏览器的大小调整宽度(也可能是高度)。您可以检查此行为 here .

有人建议怎么做this ，但这是以 Google Charts Javascript 版本的形式出现的，而不是 GWT 版本。在 GWT 中，Options 对象有一个 setWidth 方法，该方法需要 int 值，因此这里不允许使用百分比。我尝试使用更通用的属性规范程序:

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

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

我想我可以 try catch window.resize 事件，但我不太确定如何从 GWT 中的 Java 客户端执行此操作...有什么想法/建议吗？

谢谢!亚历克斯

Answer 1

遗憾的是，百分比维度不适用于 Google 图表工具。您必须指定明确的尺寸。
有几种解决方法可以使图表在 GWT 中具有响应能力。

• 使用非官方 GWT 图表工具包装器 gwt-charts工具。它支持开箱即用的响应式图表。除此之外，它还具有图表工具新增功能的包装器(数据 Angular 色、控件和仪表板等)。官方包装多年来没有任何更新。
• 扩展官方图表包装器并添加响应式功能。

解决方案:

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在官方包装中是私有(private)的。因此，您必须将它们再次添加到扩展类中才能访问它们。此外onLoad()官方设置两者的方法Options和AbstractDataTable为 null，因此您无法在 onResize() 中访问它们方法。

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

• fork 官方 GWT 图表包装器并直接在其中添加上述功能。

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