ext3.x图标制作（饼图+柱状图）

37度恒温男

于 2014-08-12 19:59:58 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/u011008128/article/details/38520055

版权

/**************************************************************html文件********************************************/

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>我的桌面</title>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../../css/index.css">
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<script type="text/javascript" src="../../ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>

<body>
<div id="container"> </div>
</body>
</html>

/**************************************************************js文件***********************************************/

Ext.onReady(function() {

// Ext.onReady(function() { //定义ColumnModel
var store = new Ext.data.JsonStore({
data: [
{name: '日本', visits: 245000, views: 3000000},
{name: '韩国', visits: 240000, views: 3500000},
{name: '泰国', visits: 355000, views: 2000000},
{name: '伊朗', visits: 375000, views: 3200000},
{name: '法国', visits: 590000, views: 3500000},
{name: '德国', visits: 395000, views: 6800000},
{name: '中国', visits: 580600, views: 8500000}
],
fields: ['name', 'visits', 'views'],
});
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++柱状图
new Ext.Panel({
title: '国际某某统计图',
renderTo: 'container',
width: 500,
height: 300,
layout: 'fit',
items: {
xtype:'columnchart',
store: store,
url: '../../ext/resources/charts.swf',
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o) {
var rec = store.getAt(o.index);
alert('选择提示', '你选择了-{0}.', rec.get('name'));
}
}
}
});
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++饼图
new Ext.Panel({
title: '国际某某统计图',
renderTo: 'container',
width: 500,
height: 300,
layout: 'fit',
items: {
xtype:'piechart',
store: store,
url: '../../ext/resources/charts.swf',
dataField:'visits',//重要属性
categoryField:'name',
/* 定义pie的颜色范围及在图面上显示百分比 */
series:[{
style:{
showLabels:true,
colors:[0x953030, 0xFF8C40, 0xFFDB59, 0x8DC63F,
0xFF4FFF,0xffbbcc,
0x953040, 0xFF8440, 0xFFD459, 0x84C63F,
0x4FFF44,0xaabbee]
}
}],
extraStyle:{
legend:{
display:'bottom',
animationEnabled:true,//动画效果，默认为true
// background:{//指定背景
image:'/webApp/images/desktop.gif'
// },
padding:5,
font:{
family:'Tahoma',
size:13
}
}
}
}
});
});

37度恒温男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ext3.x图标制作（饼图+柱状图）

Ext.onReady(function() {// Ext.onReady(function() { //定义ColumnModel var store = new Ext.data.JsonStore({data: [{name: '日本', visits: 245000, views: 3000000},{name: '韩国', visits: 240000, v
复制链接

扫一扫