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了。。。。。。。。。。


这也是最后一节了。再见亲们～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～