如下图:
当store里面没有数据时候,柱状图的里面还是显示有数据,显示的还是界面加载时的初始值,这个问题怎么解决???
柱状图的代码如下:
var barChart = Ext.create('Ext.chart.Chart', {
flex: 1,
shadow: true,
animate: true,
// resizable:true,
store: chartStore,
// background: {
// fill: 'rgb(17, 17, 17)'
// },
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes:[{
type:'Numeric',
position:'left',//放置到左边
fields:['count'],
title:'指标值',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
},
grid:true,
minimum:0,//可以看一下运行的效果是,y坐标是从0开始的
//maximum :30,
},{
type:'Category',
position:'bottom',
fields:['serv_name'],
title:'服务名称',
grid: true,
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 6, false);
},
rotate: {
degrees: 30
}
}
}],//轴
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'count',
orientation: 'horizontal',
fill: '#ffff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
width:100,
opacity: 0.95
},
xField: 'serv_name',
yField: ['count'],
tips:{//提示
trackMouse:true,
width:140,
height:38,
renderer:function(storeItem,item){
this.setTitle(storeItem.get('serv_name') + ':' +
storeItem.get('count') + '次');
}
}
}]
});Ext JS
当store里面没有数据时候,柱状图的里面还是显示有数据,显示的还是界面加载时的初始值,这个问题怎么解决???
柱状图的代码如下:
var barChart = Ext.create('Ext.chart.Chart', {
flex: 1,
shadow: true,
animate: true,
// resizable:true,
store: chartStore,
// background: {
// fill: 'rgb(17, 17, 17)'
// },
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes:[{
type:'Numeric',
position:'left',//放置到左边
fields:['count'],
title:'指标值',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
},
grid:true,
minimum:0,//可以看一下运行的效果是,y坐标是从0开始的
//maximum :30,
},{
type:'Category',
position:'bottom',
fields:['serv_name'],
title:'服务名称',
grid: true,
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 6, false);
},
rotate: {
degrees: 30
}
}
}],//轴
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'count',
orientation: 'horizontal',
fill: '#ffff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
width:100,
opacity: 0.95
},
xField: 'serv_name',
yField: ['count'],
tips:{//提示
trackMouse:true,
width:140,
height:38,
renderer:function(storeItem,item){
this.setTitle(storeItem.get('serv_name') + ':' +
storeItem.get('count') + '次');
}
}
}]
});Ext JS
如果没有清空数据的方法,那你就在前台做一个假数据,字段值内容全部为空,然后
让store去重新load这个假数据。