0

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

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

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

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

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

谢谢！亚历克斯

4

1 回答 1

2

不幸的是，百分比维度不适用于谷歌图表工具。您必须指定明确的尺寸。
有几个解决方法可以使图表在 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()官方的方法将Optionsand都设置AbstractDataTable为null，所以你不能在onResize()方法中访问它们。

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

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

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

于 2013-10-24T14:31:07.493 回答