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);
在你的情况,这是有可能的正确答案。
谢谢!很好的答案。现在它运作得非常好。 – kinaesthesia 2013-03-15 15:27:54
@Colin Alworth如何将装载器附加到gxt 2.2.5中的图表?此版本中不存在方法setStore和bindStore。你知道吗? – 2014-01-10 10:15:19
这个答案是特定于GXT 3,因为这是问题的问题。 GXT 2并不直接与商店打交道,而是有自己的方法来提供数据。 – 2014-01-10 15:26:00