EXTJS动态刷新chart的fields
最近遇到一个需求,chart要展示的曲线将来可能是曲线的条数,名字,数据什么的都会改变,最主要的是要在同一个chart处能够通过下来选项框,选择任意展示数据曲线(也许一开始可能觉得,那我定义多个chart,每个chart对应一个下拉选项不就好了,但是,问题在于,现在下拉选项也是未来可能会动态增加的)
Chart动态刷新fields,实际上就是chart中绘制的多条线可能是不固定的,动态改变的,或者至少说是chart的每条线的对应的fields域名是动态改变的。
简单举个例子,可能一般写chart,都会定义纵坐标横左边的fields,这样方便从后台获取得到json数组时解析json对象属于自己的内容方便。一般情况下没有特殊需要都是在前台js处写死的fields,但是如果某天你的需求会改变,你展示的线可能还是那几条线,但是换了一组数据,名字啊,数据啊全改变了,这些数据是未知的,将来的改变,你现在是不知道的。那你要怎样,才能在你原本的chart位置绘制出适应新数据的曲线图表。
一般使用EXTJs创建chart使用如下方式:
<strong>var chart = Ext.create('Ext.chart.Chart',{
animate: true,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: [dataField],
label: {
renderer:Ext.util.Format.numberRenderer('0,0')
},
minorTickSteps: 1,
minimum: 0,
maxmum: 100
}, {
type: 'Category',
position: 'bottom',
fields: ['name']
}],
series: [{ type: 'line',
highlight: {
size: 1,
radius: 1
},
axis: 'left',
xField : 'name',
yField : dataField,
smooth: true,
style: {
fill: style,
stroke:style,
'stroke-width': 3
},
markerConfig: {
type:'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: style,
stroke: style
},
tips: {
trackMouse:true,