java - GXT-3 问题为我的图表加载数据

Question

我的问题很烦人。我的服务器端正在生成 12 个随机数(此处为双倍)。

我的客户端收到了正确的数据，但我的图表中没有显示任何内容。这对于存储中的硬编码数据来说效果很好，但对于 REST 调用则不然。

我的服务器和客户端之间的传输是:

[{"key":"key0","value":0.47222548599297787},{"key":"key1","value":0.6009173797369691},{"key":"key2","value":0.13880104282435624},{"key":"key3","value":0.01804674319345545},{"key":"key4","value":0.5547733564202956},{"key":"key5","value":0.8229999661308851},{"key":"key6","value":0.8959346004391032},{"key":"key7","value":0.6848052288628435},{"key":"key8","value":0.10222856671111813},{"key":"key9","value":0.6931371931409103},{"key":"key10","value":0.2994297934549003},{"key":"key11","value":0.47566752196381334}]

这是我用于测试的简单类。我是 GXT 3 的新手

public void onModuleLoad() {

    final ListStore<JSOModel> store;
    final ContentPanel panel  = new FramedPanel();
    RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "/ws/DocumentService/v1/test");
    builder.setHeader("Accept", "application/json");

    HttpProxy proxy = new HttpProxy(builder);

    final Loader<ListLoadConfig, ListLoadResult<JSOModel>> loader = new ListLoader<ListLoadConfig, ListLoadResult<JSOModel>>(proxy, new DataReader<ListLoadResult<JSOModel>, String>() {
        @Override
        public ListLoadResult<JSOModel> read(Object loadConfig, String data) {
            List<JSOModel> jsoModels = new ArrayList<JSOModel>();
            JsArray<JSOModel> jsoModelJsArray = JSOModel.arrayFromJson(data);
            if(jsoModelJsArray != null) {
                for(int i = 0; i < jsoModelJsArray.length(); i++) {
                    jsoModels.add(jsoModelJsArray.get(i));
                }
            }

            return new ListLoadResultBean<JSOModel>(jsoModels);
        }
    });

    store = new ListStore<JSOModel>(new ModelKeyProvider<JSOModel>() {
        @Override
        public String getKey(JSOModel item) {
            return item.get("key");
        }
    });

    loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, JSOModel, ListLoadResult<JSOModel>>(store) {
        @Override
        public void onLoad(LoadEvent<ListLoadConfig, ListLoadResult<JSOModel>> event) {
            ListLoadResult<JSOModel> loaded = event.getLoadResult();
            if(loaded.getData() == null) {
                store.replaceAll(new ArrayList<JSOModel>());
            } else {
                store.replaceAll(loaded.getData());
            }
        }
    });

    Chart<JSOModel> chart = new Chart<JSOModel>();
    chart.setStore(store);
    chart.setShadowChart(true);

    NumericAxis<JSOModel> axis = new NumericAxis<JSOModel>();
    axis.setPosition(Chart.Position.LEFT);
    axis.addField(new ValueProvider<JSOModel, Number>() {
        @Override
        public Number getValue(JSOModel JSOModel) {
            return JSOModel.getNumber("value");
        }

        @Override
        public void setValue(JSOModel JSOModel, Number number) {

        }

        @Override
        public String getPath() {
            return "key";
        }
    });
    axis.setTitleConfig(new TextSprite("Number of hits"));
    axis.setWidth(50);
    axis.setMinimum(0);
    axis.setMaximum(100);
    chart.addAxis(axis);

    PathSprite odd = new PathSprite();
    odd.setOpacity(1);
    odd.setFill(new Color("#dff"));
    odd.setStroke(new Color("#aaa"));
    odd.setStrokeWidth(0.5);
    axis.setGridOddConfig(odd);

    CategoryAxis<JSOModel, String> horizontalAxis = new CategoryAxis<JSOModel, String>();
    horizontalAxis.setPosition(Chart.Position.BOTTOM);
    horizontalAxis.setField(new ValueProvider<JSOModel, String>() {
        @Override
        public String getValue(JSOModel JSOModel) {
            return  JSOModel.get("key");
        }

        @Override
        public void setValue(JSOModel JSOModel, String s) {

        }

        @Override
        public String getPath() {
            return "key";
        }
    });
    horizontalAxis.setTitleConfig(new TextSprite("month of year"));
    chart.addAxis(horizontalAxis);

    LineSeries<JSOModel> column = new LineSeries<JSOModel>();
    column.setYAxisPosition(Chart.Position.LEFT);
    column.setStroke(new RGB(148,174,10));
    column.setHighlighting(true);
    chart.addSeries(column);

    axis.addField(column.getYField());
    chart.addSeries(column);

    chart.setHeight(100);
    chart.setWidth(100);

    Button b = new Button("ha");
    b.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent clickEvent) {
            loader.load();
        }
    });

    RootPanel.get().add(b);



    panel.setCollapsible(true);
    panel.setHeadingText("Column Chart");
    panel.setPixelSize(620, 500);
    panel.setBodyBorder(true);


    VerticalLayoutContainer layout = new VerticalLayoutContainer();
    panel.add(layout);

    chart.setLayoutData(new VerticalLayoutContainer.VerticalLayoutData(1,1));
    layout.add(chart);

    chart.setBackground(new Color("#dff"));
    RootPanel.get().add(panel);

Answer 1

有两种方法可以将图表连接到存储中。一种是简单地指定图表正在通过 setStore 使用商店，就像您所做的那样:

    chart.setStore(store);

当您执行此操作时，您还必须通知图表何时必须重绘所有内容 - 您必须调用:

    chart.redrawChart();

此调用必须在加载完成后不久进行 - 考虑在 onLoad 结束时进行。

为什么需要这样做？在某些情况下，开发人员希望对商店进行多次更改，一次一项，如果图表在每次更改后自动更新，则会对数据模型产生许多缓慢的更改，并且最终可能看起来很奇怪。在这种情况下，您只需在所有更改完成后调用 redrawChart()。

但是，还有另一种选择 - 您可以调用 bindStore，而不是调用 setStore，并要求图表在图表发生任何更改时自动更新:

    chart.bindStore(store);

就您而言，这可能是正确的答案。