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

最新推荐文章于 2022-10-11 17:58:01 发布
最新推荐文章于 2022-10-11 17:58:01 发布
阅读量2.8k 收藏 3
点赞数 3
分类专栏： GWT/GXT GXT之旅 文章标签： charts integer portlet string service flash
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miqi770/article/details/7590256
版权

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了。。。。。。。。。。发火
  • 这也是最后一节了。再见亲们～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～


各种chart图分析
smileberry1的专栏
11-17 5534
1.asp.net chart              Width="200px" align="center">                                      YValueMembers="parentid">
GXT之旅项目源码包
10-30
由于GWT和GXT的jar包太大了，所以就删除了。相信大家会自动添加进来，让项目跑起来的。不会的，看http://blog.csdn.net/miqi770/article/details/7164391
各种chart图表
12-28
各种chart图表。 完美chart图表。 高端大气上档次，狂拽炫酷吊炸天。
gxt chart使用
wangluowanglei的专栏
04-22 387
chart使用时要除了在model中引用外，还要在hostpage中加上一句
GXT之旅：第九章：Charts图表——准备工作
miqi770的专栏
05-09 2531
第九章：Charts 本章我们要了解GXT的Chart功能。我们会全面了解Chart。为了消除对Chart功能的疑惑，我们会使用真实的数据展示Chart。 我们会涉及到如下GXt功能集 Chart ChartModel ChartConfig BarChart CylinderBarChart FilledBarChartSketchBarChartHorizont
GXT之旅：第九章：Charts图表——各种Chart(3)
miqi770的专栏
05-14 3719
CylinderBarChart class BarChart chartConfig = new CylinderBarChart(); chartConfig.addValues(6936,8628,41832,68376,296,10114,4693); FilledBarChart class FilledBarChart看起来和标准的BarChart没什么两样。但是她可
GXT技术详解：GWT对比与GXT实现原理
开发人员使用Java编写代码，然后通过GXT库，这些代码会被编译成JavaScript，能够在各种主流浏览器上运行。这种方式降低了对JavaScript编程的需求，同时利用了Java的成熟生态系统。 **原理讲解** GXT的核心原理在于...
GXT组件使用教程4——Aggregation Grid
03-20
9. **集成其他GXT组件** Aggregation Grid可以与其他GXT组件无缝集成，如使用ToolBar进行数据过滤或分页，或者结合Window组件实现弹出对话框。 10. **调试和学习资源** 要更好地理解和使用GXT，可以参考官方文档...
GXT:反编译的 GTA 文本行
05-30
该存储库包含反编译的GXT文件和它们的编译器。 运行build_[game]_[platform].bat为您想要的游戏快速构建 GXT。 反编译的 GXT 使用原始源的语法将 GXT 文件反编译为 TXT。 字符串大多按照它们在原始源文件中的顺序...
GXT组件使用教程2——Auto Height Grid
07-27
标题“GXT组件使用教程2——Auto Height Grid”指的是一个关于如何在GXT应用中实现自动高度调整的表格网格组件的教学。这个功能允许表格根据其内容自动调整高度，无需开发者手动设置固定的高度值。这对于显示不确定...
GXT之旅：第九章：Charts图表——Chart的基本创建(1)
miqi770的专栏
05-09 2716
Chart class 作为一个java类，Chart其实就是针对Open Flash Chart 库做了包装，并且让用户在使用起来就像其他的GXT的components一样。 需要注意的是，在使用Chart的时候，需要给定一个open-flash-chart.swf的URL地址——上一节，我们拷入到RSSReader项目里面的地址。当然URL必须有效，否则Chart不会被渲染出来，除了控制室
C#winform端SunnyUI之uiLineChart
风，停了
10-11 7554
C#winform端SunnyUI之uiLineChart
图表数据的绑定
weixin_44543305的博客
05-06 618
一． 绘画图表说明 1． 图标的绑定是一种把数据显示更加的透明直白的展现给人们看的数据，在图1 里面就是把 数据以图表的形式，图表有很多形式，其中在图1里面其实就是其中之一的一种形式而已 ，图1的是一种饼状图，还有柱状图，等等，这些图来源以其中的echarts图标插件里面! 图1 饼状图 2. 你要用到echarts首先呢？就要一个插件的引用了，引用完成后，在echarts里面绘画图 表，还得...
SunnyUI 学习1.3——图表
热门推荐
qq_43851684的博客
01-01 1万+
1 简介 UIBarChart UIBarChartEx UIDoughnutChat UILineChart UIPieChart 2 UIBarChart 柱状图，与Echart的用法类似 可以修改主题颜色 barChart.ChartStyleType = UIChartStyleType.Default;//默认颜色 barChart.ChartStyleType = UIChartStyleType.Plain; // Plain型 BarChart.ChartStyleType = UI
我所用到的第三方开源库源码阅读分析笔记
qq_28884869的博客
06-19 917
关注 一。UITableView+FDTemplateLayoutCell 首发地址 介绍 第一个是让我从复杂的tableviewcell布局中解放出来的一个category：UITableView-FDTemplateLayoutCell，我在上一篇文章中有提起：(iOS)使用auto layout进行复杂布局时，UILabel的相关trick
[原创][开源] SunnyUI.Net 开发日志：UIBarChart 坐标轴刻度取值算法
Unknowncheats的博客
03-28 1103
SunnyUI.Net, 基于 C# .Net WinForm 开源控件库、工具类库、扩展类库、多页面开发框架 Blog:https://www.cnblogs.com/yhuse Gitee:https://gitee.com/yhuse/SunnyUI GitHub:https://github.com/yhuse/SunnyUI 帮助文档目录:https://www.cnblogs.com/yhuse/p/SunnyUI_Menu.html 欢迎交流，QQ群：56829229 (Sun...
GXT的MVC执行详细顺序及过程
as_314159265的专栏
08-04 784
最近在学习GXT，刚开始理解没有那么深刻，也没有使用MVC设计，毕竟中国人研究GXT的没有多少，郁闷啊。 话不多说，直接入题。 Gxt工程使用MVC的执行先后顺序: 1.加载appengine-web.xml,web.xml,XX.gwt.xml等配置文件，读取module
【Dispatcher】请求转发
秃头披风侠的博客
02-27 1906
介绍和说明了dispathcer，并用代码进行了演示
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值