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

问题描述:

我的问题很烦人。我的服务器端正在生成12个随机数字(这里是double)。GXT-3问题为我的图表加载数据

我的客户端收到了正确的数据,但我的图表中没有显示任何内容。这对于商店中的硬编码数据可以很好地工作,但与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); 

有两种方法将图表连接到商店。一个是简单地指定图表通过setStore使用一个商店,你干得:

chart.setStore(store); 

当你这样做,你也必须通知图表时就必须重新绘制的一切 - 你必须调用:

chart.redrawChart(); 

此调用必须在加载完成后立即进行 - 请考虑在onLoad结束时执行此调用。

这是什么要求?在某些情况下,开发人员希望对商店进行多次更改,每次更改一次,并且如果图表在每次更改后自动更新,那么会对数据模型产生很多缓慢的更改,最终可能会看起来很奇怪。在这种情况下,所有更改完成后,您只能拨打redrawChart()

然而有另一种选择 - 而不是调用setStore,你可以叫bindStore,并要求图表,只要任何发生变化时图表自动更新:

chart.bindStore(store); 

在你的情况,这是有可能的正确答案。

+1

谢谢!很好的答案。现在它运作得非常好。 – kinaesthesia 2013-03-15 15:27:54

+0

@Colin Alworth如何将装载器附加到gxt 2.2.5中的图表?此版本中不存在方法setStore和bindStore。你知道吗? – 2014-01-10 10:15:19

+0

这个答案是特定于GXT 3,因为这是问题的问题。 GXT 2并不直接与商店打交道,而是有自己的方法来提供数据。 – 2014-01-10 15:26:00