1
나는 현재 작성중인 선 차트에 문제가 있습니다.ExtJS 4.2 - 차트 다시 그리기, 이전 레이블이 계속 표시됨
나는 매초마다 을 자동으로 업데이트하고 "Ping Time"텍스트 필드 의 값을 받아 다음 "분"색인에 배치합니다.
그러나 잘못된 점은 차트가 업데이트되면 축을 제대로 새로 고칠 수 없다는 것입니다. 현재 작업에서 볼 수 있습니다
코드의 우려 조각이 차트 생성 될 것이다,
Ext.create('Ext.chart.Chart',{
renderTo:Ext.getBody(),
id:'ChartTest',
xtype: 'chart',
width: 400,
height:300,
store: testStore,
axes:[
{
title:'Ping Time',
type: 'Numeric',
position: 'left',
grid:true,
fields: ['ping'],
},
{
title:'Minutes',
type: 'Numeric',
position: 'bottom',
grid:true,
fields:['id'],
minimum:0,
}
],
series: [
{
type:'line',
xField:'id',
yField:'ping',
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('id'));
this.update(storeItem.get('ping'));
}
}
}
],
});
을뿐만 아니라 상쾌한 코드로
var task = Ext.TaskManager.start({
run: function() {
min=min+1;
// max=max+1;
// Ext.getCmp('ChartTest').axes.items[1].maximum=max;
Ext.getCmp('ChartTest').axes.items[1].minimum=min;
test= Ext.getCmp('PingTime').getValue();
temp = temp+1;
Ext.getCmp('display').setValue('Temp = '+temp+' Test = '+test);
testStore.add({id:temp,ping:test});
var rec= testStore.getAt(0);
Ext.getCmp('display2').setValue('rec is '+rec.get('id'));
if(rec.get('id')<temp-8)
{
testStore.remove(rec);
}
Ext.getCmp('ChartTest').redraw();
},
interval: 2000
});
나는 당신이 말한대로하려고했지만, 당신이 말했듯이, y 축은 즉시 대부분의 라벨을 잃을 것입니다. 최대 값과 최소값을 100으로 설정하여이를 고치려고하면 차트가 완전히 손상됩니다. 업데이트 된 코드는 여기에서 볼 수 있습니다 : – user3216871
http://jsfiddle.net/HTj5Q/74/ – user3216871