GXT之旅：第九章：Charts图表——准备工作
第九章：Charts
本章我们要了解GXT的Chart功能。我们会全面了解Chart。为了消除对Chart功能的疑惑，我们会使用真实的数据展示Chart。
我们会涉及到如下GXt功能集
- Chart
- ChartModel
- ChartConfig
- BarChart
- CylinderBarChart
- FilledBarChart
- SketchBarChart
- HorizontalBarChart
- PieChart
- LineChart
- AreaChart
因此GXT的Chart功能，在使用上需要有一些配置步骤，这些步骤并不是那么显而易见的，这也就意味着我们在使用Chart的时候很容易遇上麻烦。因此，在我们开始之前，我们先按照基本步骤建立几个example程序，先熟悉熟悉。同时让我们了解如果少了几个步骤会显示什么样子的出错信息，有助于解决以后搭建自己程序时遇到的问题。
导入chart module
- 来到我们RSSReader项目的module配置文件——RSSReader.gwt.xml，导入有关chart的module
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='rssreader'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User' /> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard' /> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <inherits name='com.extjs.gxt.ui.GXT' /> <inherits name='com.extjs.gxt.charts.Chart' /> <!-- Specify the app entry point class. --> <entry-point class='com.danielvaughan.rssreader.client.RSSReader' /> <!-- Specify the paths for translatable code --> <source path='client' /> <source path='shared' /> </module>
- 如果你缺少这一步，当你使用Chart组件的时候，会有如下error message:
[ERROR] [rssreader] Line 26: No source code is available for type com.extjs.gxt.charts.client.Chart; did you forget to inherit a required module?
导入chart resource
就chart自身而言，其内容是由flash和JavaScript组成的。代码里面不单单需要引用chart module还要引用resource文件。这些resource文件需要，我们导入到项目里面。
- 找到GXT发布包里面的gxt-2.2.5\resources\chart\下所有内容，复制到项目的WebContent\gxt\下。
- 如果上述文件忘记以用的话，会有如下error message。
[WARN] 404 - GET /gxt/chart/open-flash-chart.swf (127.0.0.1) 1416 bytes
- 同样的gxt-2.2.5\resources\flash\下所有内容，复制到项目的WebContent\gxt\下。
- 如果上述文件忘记以用的话，会有如下error message。
18:27:08.015 [ERROR] [rssreader] Unable to load module entry point class com.danielvaughan.rssreader.client.RSSReader (see associated exception for details) com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot call method 'embedSWF' of undefined stack: TypeError: Cannot call method 'embedSWF' of undefined as well as the following message on the Java console: [WARN] 404 - GET /gxt/flash/swfobject.js (127.0.0.1) 1408 bytes
- （当然，先前我都直接复制过来了，^_^
）
加载chart所用的JavaScript库
- 其实大家也应该知道，页面引用flash文件，离不开swfobject.js。编辑RSSReader.html，如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="RSSReader.css"> <link type="text/css" rel="stylesheet" href="css/item.css"> <link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css"> <script language='javascript' src='gxt/flash/swfobject.js'> </script> <title>RSSReader</title> </head> <body> <div id="loading"> <div class="loading-indicator"> <img src="gxt/images/default/shared/large-loading.gif" width="32" height="32" />RSS Reader<br /> <span id="loading-msg">Loading...</span> </div> </div> <script type="text/javascript" language="javascript" src="rssreader/rssreader.nocache.js"></script> </body> </html>
- 如果swfobject.js没有引入的话，控制台会报错的哦
[ERROR] [rssreader] Unable to load module entry point class com.danielvaughan.rssreader.client.RSSReader (see associated exception for details) com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot call method 'embedSWF' of undefined stack: TypeError: Cannot call method 'embedSWF' of undefined: