防止Extjs标记圈被切断
Prevent Extjs Marker Circles from cutting off
我是 Extjs 的新手,我边学边学。我还有很长的路要走,但我学到了我需要知道的东西。我的标记圈被切断了。我可以使用 setting/workaround 来防止这种情况发生吗?见图:
我查看了 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并且他们的圈子没有被切断:
您可以使用 innerPadding 配置 属性:
Ext.onReady(() => {
Ext.create({
xtype: 'cartesian',
renderTo: element, // rendered element
height: 200,
innerPadding: 10, // THIS PROPERTY
...
...
我是 Extjs 的新手,我边学边学。我还有很长的路要走,但我学到了我需要知道的东西。我的标记圈被切断了。我可以使用 setting/workaround 来防止这种情况发生吗?见图:
我查看了 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并且他们的圈子没有被切断:
您可以使用 innerPadding 配置 属性:
Ext.onReady(() => {
Ext.create({
xtype: 'cartesian',
renderTo: element, // rendered element
height: 200,
innerPadding: 10, // THIS PROPERTY
...
...