如何使用散点图中的侦听器获取getLimit()和setLimit()方法?

Question

我们如何通过使用散点图中的侦听器来获取getLimit((和setLimit((方法。任何人都可以解释组件中极限的动态变化。

这里为侦听器附加了代码，

listeners: {
itemmousemove: function (series, item, event,tip) {
console.log('itemmousemove', item.category, item.field);
}
}

如何动态更改散点图中限制的属性，附上下面的代码。

limits: [{
value: 'metric two',
line: {
strokeStyle: 'red',
lineDash: [6, 3],
title: {
text: 'Qty',
fontSize: 14,
fontWeight: 'bold'
}
}
}]

Answer 1

这是一个如何操作图表中限制的示例，不确定您想在"itemmousemove"中做什么，所以我把它放在一个itemdblclick示例中：

样品小提琴

Ext.application({
name: 'Fiddle',
layout: 'fit',
launch: function () {
var chart = Ext.create('Ext.chart.CartesianChart', {
width: 600,
height: 400,
insetPadding: 40,
interactions: ['itemhighlight'],
plugins: {
chartitemevents: {
moveEvents: true
}
},
store: {
fields: ['name', 'data1', 'data2'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 14
}, {
'name': 'metric two',
'data1': 7,
'data2': 16
}, {
'name': 'metric three',
'data1': 5,
'data2': 14
}, {
'name': 'metric four',
'data1': 2,
'data2': 6
}, {
'name': 'metric five',
'data1': 27,
'data2': 36
}]
},
axes: [{
id: 'myAxis',
type: 'numeric',
position: 'left',
fields: ['data1'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0,
limits: [{
value: 0.2,
line: {
strokeStyle: 'red',
lineDash: [6, 3],
title: {
text: 'Monthly minimum',
fontSize: 14
}
}
}]
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text: 'Sample Values',
fontSize: 15
}
}],
series: {
type: 'scatter',
highlight: {
size: 12,
radius: 12,
fill: '#96D4C6',
stroke: '#30BDA7'
},
fill: true,
xField: 'name',
yField: 'data2',
marker: {
type: 'circle',
fill: '#30BDA7',
radius: 10,
lineWidth: 0
}
},
listeners: {
itemdblclick: function (series, item, event, tip) {
var lim = chart.getAxis('myAxis').getLimits();
var new_lim = CreateNewLimit(0.9, 'yellow', 'Clicked Limit');
lim.push(new_lim);
RefreshChart(lim);
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'Scatter Chart',
renderTo: document.body,
tbar: [{
xtype: 'button',
text: 'Toggle Limit',
handler: function () {
var lim = chart.getAxis('myAxis').getLimits();
var new_lim = CreateNewLimit(0.7, 'blue', 'Monthly Max');
if (lim.length == 1) {
lim.push(new_lim);
} else {
lim.splice(1, 1);
}
RefreshChart(lim);
}
}, {
xtype: 'button',
text: 'Add New ',
handler: function () {
var lim = chart.getAxis('myAxis').getLimits();
var new_lim = CreateNewLimit(0.5, 'green', 'Monthly Average');
lim.push(new_lim);
RefreshChart(lim)
}
}],
items: [
chart
]
});
function RefreshChart(lim) {
chart.getAxis('myAxis').setLimits(lim);
chart.getStore().removeAll();
chart.getStore().reload();
}
function CreateNewLimit(val, color, text) {
return {
value: val,
line: {
strokeStyle: color,
lineDash: [6, 3],
title: {
text: text,
fontSize: 14
}
}
};
}
}
});