smartgwt绘制graph

本文介绍了如何利用SmartGWT的Graph控件在网页上绘制图表。从版本选择到开发环境搭建,再到具体代码实现,文章详细展示了创建图表的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在有些情况下,网页制作者会有需要用到“绘制图表”功能,smartgwtee提供了一组优秀的 graph控件 供使用者快速画出好看的图表。

首先,值得注意的是,并非所有版本的smartgwt都提供了graph功能,免费版(LGPL)并不提供,此外的Full-featured、Pro、Power、Enterprise版本都有提供,具体可参考SmartClient官网上的产品介绍页http://www.smartclient.com/product/

现在,在了解各版本支持功能后,在官网上下载60天试用smartgwtee版本(3.1),下载地址:http://www.smartclient.com/product/download-bounce.jsp?product=smartgwt&license=eval&version=3.1 下载前需要注册!

1. 下载后,准备好smartgwt所需的开发环境(eclipse + 所需插件)

2. 打开eclipse,建立一个新项目,比如:TestChart.接着将下载好的 smartgwtee-3.1.zip 解压缩,打开里面的lib文件夹,将所有的库文件复制粘贴到 TestChart 项目的war/WEB-INF/lib下(注意:eclipse中需要手动导入库文件,导入方式: 在eclipse中右键工程名字TestChart -> Properties -> Java Build Path -> Libraries -> Add JARs -> 选择TestChart/war/WEB-INF/lib -> 选择刚才复制进去的所有jar包)

3. 更新工程TestChart/src/com.example.myproject/modulename.gwt.xml(斜体部分为你在创建工程时所定义的)文件,添加如下语句:

<inherits name="com.smartgwtee.SmartGwtEE"/>
<inherits name="com.smartgwt.Drawing"/>
<inherits name="com.smartgwt.Charts"/>
<inherits name="com.smartgwtee.tools.Tools"/>

 

4. 修改项目入口的HTML文件(modulename.html),设置isomorphicDir:

<script>
   var isomorphicDir = "testchart/sc/";
</script>

 

【注意】此段script代码需要添加在 *.nocache.js 加载前

 

5.加入测试代码:

    1) 当前工程目录结构如下:

 

    2)项目入口函数 TestChart.java

public class TestChart implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // Create your own record class
        class SalesRecord extends Record {
            SalesRecord(String region, String product, Integer sales) {
                setAttribute("region", region);
                setAttribute("product", product);
                setAttribute("sales", sales);
            }
        }

        // Add your test records
        Record[] chartData = new Record[] {
                new SalesRecord("West", "Cars", 37),
                new SalesRecord("North", "Cars", 29),
                new SalesRecord("East", "Cars", 80),
                new SalesRecord("South", "Cars", 87),
                new SalesRecord("West", "Trucks", 23),
                new SalesRecord("North", "Trucks", 45),
                new SalesRecord("East", "Trucks", 32),
                new SalesRecord("South", "Trucks", 67),
                new SalesRecord("West", "Motorcycles", 12),
                new SalesRecord("North", "Motorcycles", 4),
                new SalesRecord("East", "Motorcycles", 23),
                new SalesRecord("South", "Motorcycles", 45) };

        // Create the chart object
        final FacetChart simpleChart = new FacetChart();
        // Create chart params, here is "region" and "product". Names are the same as defined 
        // class constructor's params
        Facet regionFacet = new Facet("region", "Region");
        Facet productFacet = new Facet("product", "Product");
        simpleChart.setFacets(regionFacet, productFacet);

        // Set chart data
        simpleChart.setData(chartData);
        simpleChart.setValueProperty("sales");
        // Set chart presentation type
        simpleChart.setChartType(ChartType.AREA);
        simpleChart.setTitle("Sales by Product and Region");

        // Overall layout
        VLayout simpleChartLayout = new VLayout();
        simpleChartLayout.setWidth100();
        simpleChartLayout.setHeight100();
        simpleChartLayout.setMembersMargin(20);
        // Add chart to the layout
        simpleChartLayout.setMembers(simpleChart);
        simpleChartLayout.draw();
    }
}

 

c) 最后看下执行效果吧~

(当然,还有其他类型的图标,可通过simpleChart.setChartType(ChartType.*)设置)



 

与smartgwtee相关的其他安装参数可参考:http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/SgwtEESetup.html

 

天乙智能图形编辑浏览器是矢量图形软件,可用来制作,显示,管理一定格式的矢量图形文件。不仅支持图形画面的无级缩放和无限制移动,以及图形闪烁,动画显示,图形形态变化等功能,并且支持图形内部及个图形对象间的逻辑关系操作,实现图形内部及图形间的形态变化和行为动作的联动,生动形象地反映事物间运动变化的关系。支持动态图形文件装入和显示(超级连接),及声音文件的同步播放。支持网格设置,剪贴板及图形模板操作,支持图形,图元的无级缩放,使图形画面的编辑制作方便快捷。画面的移动可选择通常的滚动条操作方式或对于地理信息等复杂的图形画面可选择鼠标拖动方式。支持位图图形背景,可以以一个位图文件作为画面背景,位图可以采用正常,居中,平铺和拉伸方式显示。本软件主要功能的实现封装于SmartGraphX部件(ActiveX控件),便于用VC ,Delphi,VB,PB等高级语言进行二次开发。与其它开发工具有良好的接口。 2.1版新增功能:主要有图形库功能,图形库文件,对图形的多选操作,图形的旋转和镜像操作,文本对齐方式,特效文本显示,渐变显示,立体图形,自动显示选择等。SmartGraphX新增SetCartoonValue方法,推出SmgInetX部件用于 Web网页。 软件特点: 画面支持无级缩放和移动。 纯矢量图形,占用资源少,有利于图形文件在网络上传输。 支持图元闪烁。 科学的动画实现方法。制作方便,节省资源。 动画显示不仅支持连续的动作变化,而且支持颜色的渐变。 支持静态显示图形的某个动画步骤。以反映图形的状态。 支持声音文件播放,配合图形闪烁和动画显示,可实现极佳的效果。 事件触发动作机制,可以表现图形间复杂运动变化的逻辑关系。 支持不规则形状选择焦点的显示。 支持图形画面的超级连接,便于切换。 支持位图文件(Bitmap)背景,多种背景显示方式。 开放型设计,使用ActiveX控件技术,便于用户进行二次开发。 支持两种画面移动方式,即鼠标拖动和滚动条操作方式。 图形画面的编辑制作方便快捷。 图形库功能功能。 图形的多选操作。 图形的旋转和镜像操作。 文本有各种对齐方式。 可实现渐变显示,特效文本显示,立体图形显示,自动显示选择等。 SmgInetX部件可用于Web网页制作。 软件应用对象: 小规模地理信息 演示说明 电化教学 产品介绍 应用软件界面设计(通过ActiveX技术,用SmartGraphX部件进行二次开发) 工业控制软件界面设计(通过ActiveX技术,用SmartGraphX部件进行二次开发) Web网页制作 娱乐,游戏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值