加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

GXT之旅：第九章：Charts图表——各种Chart(4)

发布时间：2020-12-15 18:46:54 所属栏目：百科 来源：网络整理
导读：AreaChart class AreaChart extends LineChart ，因此工作方式都是相同的。不同之处是替换了单独的丝线，变成了线性区域。 AreaChart germanyChartConfig = new AreaChart();germanyChartConfig.addValues(68376,72815,78169,78289,79433,82075);germanyChar

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(),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","#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,index);
		setLayout(new FitLayout());
		chart.setBorders(true);
		chart.setVisible(false);
		add(chart);
	}

	private HashMap<String,++dayOccurance);
			}
		}
		return days;
	}

	public void setFeed(final Feed feed) {
		final FeedServiceAsync feedService = Registry
				.get(RSSReaderConstants.FEED_SERVICE);
		feedService.loadItems(feed.getUuid(),caught);
			}

			@Override
			public void onSuccess(List<Item> items) {
				chart.setChartModel(createChartModelData(items));
			}
		});
		if (!chart.isVisible()) {
			chart.setVisible(true);
		}
	}
}

  • 最后运行效果如下：



  • 但是GXT3的chart已经自己用js实现了，不再使用flash了。。。。。。。。。。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同