我是Extjs的新手,我在学习。我还有很长的路要走,但我学到了我需要知道的东西。我的标记圆被切断了。有没有什么设置/解决方案可以用来防止这种情况?请参见图片:
我看了v6.0.0文档,不知道该用什么。代码:
Ext.onReady(() => {
Ext.create({
xtype: 'cartesian',
renderTo: element, // rendered element
height: 200,
insetPadding: 20,
store: {
fields: ['name', 'amount'],
data: [..] // data
},
smooth: true,
axes: [{
type: 'category',
position: 'bottom',
fields: ['name'],
label: {
fill: 'rgba(0,10,30,.75)',
fontSize: 15
},
style : {
strokeStyle : 'rgba(0,10,30,.2)'
}
}],
series: [
{
type: 'line',
fill: true,
style: {
fill: '#a2d5f2',
fillOpacity: .6,
stroke: '#00a1fd',
strokeOpacity: .6,
},
tooltip: {
trackMouse: true,
renderer: (tooltip, model, item) => {
const content = item.record.data.name + ': ' + item.record.data.amount
//tooltip.setHtml(model.get(item.field));
tooltip.setHtml(content)
}
},
xField: 'name',
yField: 'amount',
marker: {
type: 'circle',
radius: 5,
lineWidth: 2,
fill: '#fff',
fillOpacity: 1,
},
renderer: (sprite, config, rendererData, index) => {
let store = rendererData.store,
storeItems = store.getData().items,
previousRecord = storeItems[index],
currentRecord = (index > 0 ? storeItems[index - 1] : previousRecord),
current = currentRecord && parseFloat(currentRecord.data['amount']),
previous = previousRecord && parseFloat(previousRecord.data['amount']),
changes = {};
switch (config.type) {
case 'marker':
if (index == 0) {
return null; // keep the default style for the first marker
}
changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
//changes.fillStyle = '#fff';
//changes.fillOpacity = 1;
//changes.lineWidth = 2;
break;
case 'line':
changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
changes.lineWidth = 2;
changes.fillStyle = (current >= previous ? '#a2d5f2' : 'red');
changes.fillOpacity = (current >= previous ? 1 : .1);
break;
}
return changes;
}
}]
});
})
我相信Xero正在使用Ext,他们的圆圈不会中断:
1条答案
按热度按时间uoifb46i1#
您可以使用innerPadding配置属性: