GXT之旅：第九章：Charts图表——各种Chart(4)
AreaChart class
AreaChart extends LineChart ，因此工作方式都是相同的。不同之处是替换了单独的丝线，变成了线性区域。
AreaChart germanyChartConfig = new AreaChart();
germanyChartConfig.addValues(68376,72815,78169,78289,79433,82075);
germanyChartConfig.setColour("#ff0000");
germanyChartConfig.setText("Germany");
AreaChart franceChartConfig = new AreaChart();
franceChartConfig.addValues(41832,45674,50771,53950,56842,59128);
franceChartConfig.setColour("#000066");
franceChartConfig.setText("France");
ScatterChart class
ScatterChart是GXT中非常有用的component chart，但GXT并不是完全支持她。比如，我们有如下数据
ScatterChart chartConfig = new ScatterChart(); chartConfig.addPoint(41832, 68376); chartConfig.addPoint(45674, 72815); chartConfig.addPoint(50771, 78169); chartConfig.addPoint(53950, 78289); chartConfig.addPoint(56842, 79433); chartConfig.addPoint(59128, 82075);数据设置进去了，但是我们没有办法在图表上设置数据的渲染方式——只有在鼠标经过的他们的时候，才可以显示出来。
使用PieChart
在我们RSSReader项目里面，还没有显示任何一个Chart功能。虽然一个小小的demo项目里面还没有什么功能需要用到chart，但是如果往里面加还是能加进去的
让我们新建一个chart显示一周内每天的feed信息的发布时间的统计情况。
- 编辑com.danielvaughan.rssreader.client.charts.FeedChart，新增如下方法——prepareData()，当然这个方法不属于Chart本身的部分，但是是做为Chart提供数据来源的。
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FitLayout());
chart.setBorders(true);
chart.setVisible(false);//为了避免报错，所以一开始设置不可见，等有chartModel的时候再设置可见
add(chart);
}
private HashMap<String, Integer> prepareData(List<Item> items) {
HashMap<String, Integer> days = new HashMap<String, Integer>();
for (Item item : items) {
DateTimeFormat fmt = DateTimeFormat.getFormat("EEEE");
String day = fmt.format(item.getPubDate());
Integer dayOccurance = days.get(day);
if (dayOccurance == null) {
days.put(day, 1);
} else {
days.put(day, ++dayOccurance);
}
}
return days;
}
- 新建方法createChartModelData(List<Item> items)
private ChartModel createChartModelData(List<Item> items) {
// create chartModel
ChartModel chartModel = new ChartModel("Posts per week of day",
"font-size: 14px; font-family: Verdana; text-align: center;");
chartModel.setBackgroundColour("#ffffff");
// create PieChart
PieChart pie = new PieChart();
pie.setColours("#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF",
"#4B0082", "#EE82EE");
// add Slice, set values
HashMap<String, Integer> days = prepareData(items);
for (String key : days.keySet()) {
pie.addSlices(new PieChart.Slice(days.get(key), key));
}
chartModel.addChartConfig(pie);
return chartModel;
}
- 新建方法setFeed()——基本实现如下：
public void setFeed(final Feed feed) {
final FeedServiceAsync feedService = Registry
.get(RSSReaderConstants.FEED_SERVICE);
//根据uuid获得其items
feedService.loadItems(feed.getUuid(), new AsyncCallback<List<Item>>() {
@Override
public void onFailure(Throwable caught) {
Dispatcher.forwardEvent(AppEvents.Error, caught);
}
@Override
public void onSuccess(List<Item> items) {
//成功之后将items转换成ChartModel，设置到chart里。
chart.setChartModel(createChartModelData(items));
}
});
}
- 现在Chart已经设置了其ChartModel，那么就不会出现“Open Flash Chart”的data error。因此我们可以大胆的设置chart visible＝true
public void setFeed(final Feed feed) {
final FeedServiceAsync feedService = Registry
.get(RSSReaderConstants.FEED_SERVICE);
// 根据uuid获得其items
feedService.loadItems(feed.getUuid(), new AsyncCallback<List<Item>>() {
@Override
public void onFailure(Throwable caught) {
Dispatcher.forwardEvent(AppEvents.Error, caught);
}
@Override
public void onSuccess(List<Item> items) {
// 成功之后将items转换成ChartModel，设置到chart里。
chart.setChartModel(createChartModelData(items));
}
});
//
if (!chart.isVisible()) {
chart.setVisible(true);
}
}
- 编辑：com.danielvaughan.rssreader.client.portlets..ChartPortlet——新增一个onFeedsDropped()
private void onFeedsDropped(DNDEvent event) {
// 接收 feeds,将feed传入到feedChart中去。
List<BeanModel> beanModels = event.getData();
for (BeanModel beanModel : beanModels) {
Feed feed = beanModel.getBean();
feedChart.setFeed(feed);
}
}
- Overwrite onRender()方法。让ChartPortlet成为另外一个DropTarget，并且和FeedPortlet拥有同样的分组FEED_DD_GROUP
package com.danielvaughan.rssreader.client.portlets;
import java.util.List;
import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.charts.FeedChart;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.extjs.gxt.ui.client.dnd.DND;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.event.DNDEvent;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
public class ChartPortlet extends Portlet {
private final FeedChart feedChart = new FeedChart();
public ChartPortlet() {
setHeading("Chart");
setId(RSSReaderConstants.CHART_PORTLET);
setLayout(new FitLayout());
setHeight(250);
Dispatcher.forwardEvent(AppEvents.NewPortletCreated, this);
}
private void onFeedsDropped(DNDEvent event) {
// 接收 feeds,将feed传入到feedChart中去。
List<BeanModel> beanModels = event.getData();
for (BeanModel beanModel : beanModels) {
Feed feed = beanModel.getBean();
feedChart.setFeed(feed);
}
}
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
DropTarget target = new DropTarget(this) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
onFeedsDropped(event);
}
};
target.setOperation(DND.Operation.COPY);
target.setGroup(RSSReaderConstants.FEED_DD_GROUP);
}
}
- FeedChart类的完整代码如下：
package com.danielvaughan.rssreader.client.charts;
import java.util.HashMap;
import java.util.List;
import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.danielvaughan.rssreader.shared.model.Item;
import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.charts.PieChart;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
public class FeedChart extends LayoutContainer {
private final Chart chart = new Chart("gxt/chart/open-flash-chart.swf");
private ChartModel createChartModelData(List<Item> items) {
ChartModel chartModel = new ChartModel("Posts per week of day",
"font-size: 14px; font-family: Verdana; text-align: center;");
chartModel.setBackgroundColour("#ffffff");
PieChart pie = new PieChart();
pie.setColours("#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF",
"#4B0082", "#EE82EE");
HashMap<String, Integer> days = prepareData(items);
for (String key : days.keySet()) {
pie.addSlices(new PieChart.Slice(days.get(key), key));
}
chartModel.addChartConfig(pie);
return chartModel;
}
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FitLayout());
chart.setBorders(true);
chart.setVisible(false);
add(chart);
}
private HashMap<String, Integer> prepareData(List<Item> items) {
HashMap<String, Integer> days = new HashMap<String, Integer>();
for (Item item : items) {
DateTimeFormat fmt = DateTimeFormat.getFormat("EEEE");
String day = fmt.format(item.getPubDate());
Integer dayOccurance = days.get(day);
if (dayOccurance == null) {
days.put(day, 1);
} else {
days.put(day, ++dayOccurance);
}
}
return days;
}
public void setFeed(final Feed feed) {
final FeedServiceAsync feedService = Registry
.get(RSSReaderConstants.FEED_SERVICE);
feedService.loadItems(feed.getUuid(), new AsyncCallback<List<Item>>() {
@Override
public void onFailure(Throwable caught) {
Dispatcher.forwardEvent(AppEvents.Error, caught);
}
@Override
public void onSuccess(List<Item> items) {
chart.setChartModel(createChartModelData(items));
}
});
if (!chart.isVisible()) {
chart.setVisible(true);
}
}
}
- 最后运行效果如下：
- 但是GXT3的chart已经自己用js实现了，不再使用flash了。。。。。。。。。。
- 这也是最后一节了。再见亲们～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～