//定义曲线图数据源store
var riskLineChartStore = Ext.create('Ext.data.Store', {
id : 'riskLineChartStore',
//store包含的数据字段
fields : ['riskLineLevel', 'riskLineTime', 'leftCoordinate'],
autoDestroy : true,
//自动加载数据
autoLoad : true,
proxy : {
// 异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
type : 'ajax',
url : './homePage!loadAction.do?loadFlag=' + 'riskLine',
// 数据读取器
reader : {
//数据格式为json
type : 'json',
//数据存在返回的list中
root : 'list'
}
}
});
//定义工具栏
var riskLineTopBar = Ext.create('Ext.toolbar.Toolbar', {
//设置工具栏位置
region : 'north',
//工具栏上包含的元素
items : [{
width : distingruishiability<2300?(300*0.6):300,
labelWidth:distingruishiability<2300?(270*0.6):270,
//label标签上显示的内容
fieldLabel : '历史风险曲线(24小时内风险走势)',
//label标题与内容的分隔符,此处为空,可以利用此属性设置必须输入的字段,即设置分割字符为红色星号即可
labelSeparator : '',
//设置类型为displayfield
xtype : 'displayfield'
}, '->', {
//‘->’表示该标签之后的元素会靠右显示
xtype : 'button', // default for Toolbars
text : '刷新',
icon : 'image/refresh.png',
handler : function() {
riskLineChartStore.load();
}
}]
});
//定义曲线图
var riskLineChart = Ext.create('Ext.chart.Chart', {
//设置类型
xtype:'chart',
//将曲线图渲染到页面内,Ext.getBody()获取到的是页面的body区域,renderTo后还可跟某div的Id
renderTo : Ext.getBody(),
//设置高度
height : 236*homepageChartRate,
// 设置宽度
width : 380*homepageChartRate,
animate : true,
//设置数据源
store : riskLineChartStore,
//设置坐标轴属性
axes : [{
//设置横坐标为类别
type : 'Category',
//横坐标的位置
position : 'bottom',
//横坐标对应的store中的字段
fields : ['riskLineTime'],
//横坐标名称
title : '风险时间',
//
dashSize:1,
label: {
//设置横坐标旋转60度显示
rotate: {
degrees: -60
}
}
}, {
//设置宗纵坐标为数字类型
type : 'Numeric',
//设置纵坐标显示的位置
position : 'left',
//设置纵坐标对应的数据字段
fields : ['leftCoordinate'],
//设置纵坐标标题
title : '风险等级',
//设置是否显示坐标线
grid : true,
//坐标最小值
minimum : 0,
//最大值
maximum : 5,
dashSize:1,
label: {
//格式化(设置格式)纵坐标数据
renderer: Ext.util.Format.numberRenderer('0')
},
majorTickSteps : 5
/*grid : {
odd : {
opacity : 1,
fill : '#ddd',
stroke : '#bbb',
'stroke-width' : 1
}
}*/
}],
//设置曲线属性
series : [{
//类型设置为曲线
type : 'line',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
xField : 'riskLineTime',
yField : 'riskLineLevel',
font:'5px Helvetica, sans-serif',
markerCfg : {
type : 'cross',
size : 4,
radius : 4,
'stroke-width' : 0
}
}]
});
原文链接:blog.csdn.net/kevinzhangfei/article/details/8665423