在ExtJS中,似乎找不到将图表轴字段标签转换为超链接的方法
我正在使用ExtJS4,并且有一个工作的水平条形图。在“轴:”部分中,我需要字段标签是超链接,因此当您查看图表时,x轴上的所有标签,以及条形图本身,都将是指向另一个网页的链接,该网页介绍了更多信息在ExtJS中,似乎找不到将图表轴字段标签转换为超链接的方法,extjs,charts,customization,Extjs,Charts,Customization,我正在使用ExtJS4,并且有一个工作的水平条形图。在“轴:”部分中,我需要字段标签是超链接,因此当您查看图表时,x轴上的所有标签,以及条形图本身,都将是指向另一个网页的链接,该网页介绍了更多信息 ... axes: [{ type: 'Numeric', position: 'bottom', fields: ['field1', 'field2', 'field3', 'field4'], title: 'Percentages', grid: true }, { t
...
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['field1', 'field2', 'field3', 'field4'],
title: 'Percentages',
grid: true
}, {
type: 'Category',
position: 'left',
fields: ['machineName'],
title: 'Machine Names'
}],
...
正是“类别”的“字段”部分打印出了机器的名称。默认情况下,此字段仅打印从JSON获取的名称。我创建了另一个变量,该变量试图获取机器名并用“+name+”将其包围,但它只是将其呈现为文本,不可单击。所有其他的搜索结果都不尽如人意。我看过一些关于主题或标签链接的东西,但在我的特定设置中,这些东西一点也不起作用。任何帮助都将不胜感激。我就是这样做的。通过重写axis.js中的getOrCreateLabel方法,可以将“单击”事件处理程序附加到axis标签
function labelClickHandler(e, t, eopts) {
console.log('clicked ' + e.text); // do your stuff here
}
// override getOrCreateLabel
Ext.chart.axis.Axis.override({
getOrCreateLabel: function (i, text) {
// Copy and paste original getOrCreateLabel body from Axis.js here
...
textLabel = surface.add(Ext.apply({
group: labelGroup,
type: 'text',
x: 0,
y: 0,
text: text
}, me.label));
surface.renderItem(textLabel);
textLabel._bbox = textLabel.getBBox();
// Add event handler after label creation
textLabel.on('click', labelClickHandler);
...
}
});
我就是这样做的。通过重写axis.js中的getOrCreateLabel方法,可以将“单击”事件处理程序附加到axis标签
function labelClickHandler(e, t, eopts) {
console.log('clicked ' + e.text); // do your stuff here
}
// override getOrCreateLabel
Ext.chart.axis.Axis.override({
getOrCreateLabel: function (i, text) {
// Copy and paste original getOrCreateLabel body from Axis.js here
...
textLabel = surface.add(Ext.apply({
group: labelGroup,
type: 'text',
x: 0,
y: 0,
text: text
}, me.label));
surface.renderItem(textLabel);
textLabel._bbox = textLabel.getBBox();
// Add event handler after label creation
textLabel.on('click', labelClickHandler);
...
}
});
这是我基于科伦坡的解决方案 此版本允许您在声明轴时设置处理程序。此外,它允许您检索标签索引,并且仅将覆盖应用于
类别
轴,因为我们对单击其他类型的轴不感兴趣
轴心国宣言:
...
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['field1', 'field2', 'field3', 'field4'],
title: 'Percentages',
grid: true
}, {
type: 'Category',
position: 'left',
fields: ['machineName'],
title: 'Machine Names',
handler: function(axis, i, label){
console.log('Label text: %o',label.text);
console.log('Label index: %o',i);
console.log('Axis: %o',axis);
}
}],
...
覆盖:
Ext.override(Ext.chart.axis.Category,{
getOrCreateLabel: function(i, text) {
var me = this,
labelGroup = me.labelGroup,
textLabel = labelGroup.getAt(i),
surface = me.chart.surface;
if (textLabel) {
if (text != textLabel.attr.text) {
textLabel.setAttributes(Ext.apply({
text: text
}, me.label), true);
textLabel._bbox = textLabel.getBBox();
}
}
else {
textLabel = surface.add(Ext.apply({
group: labelGroup,
type: 'text',
x: 0,
y: 0,
text: text
}, me.label));
surface.renderItem(textLabel);
textLabel._bbox = textLabel.getBBox();
// add event handler
if (me.label.handler && typeof(me.label.handler) == 'function') {
textLabel.on('click',Ext.pass(me.label.handler,[me, i]));
}
}
if (me.label.rotation) {
textLabel.setAttributes({
rotation: {
degrees: 0
}
}, true);
textLabel._ubbox = textLabel.getBBox();
textLabel.setAttributes(me.label, true);
} else {
textLabel._ubbox = textLabel._bbox;
}
return textLabel;
}
});
注意,这是在extjs4.0.7上完成的,这是我基于科伦坡的解决方案 此版本允许您在声明轴时设置处理程序。此外,它允许您检索标签索引,并且仅将覆盖应用于
类别
轴,因为我们对单击其他类型的轴不感兴趣
轴心国宣言:
...
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['field1', 'field2', 'field3', 'field4'],
title: 'Percentages',
grid: true
}, {
type: 'Category',
position: 'left',
fields: ['machineName'],
title: 'Machine Names',
handler: function(axis, i, label){
console.log('Label text: %o',label.text);
console.log('Label index: %o',i);
console.log('Axis: %o',axis);
}
}],
...
覆盖:
Ext.override(Ext.chart.axis.Category,{
getOrCreateLabel: function(i, text) {
var me = this,
labelGroup = me.labelGroup,
textLabel = labelGroup.getAt(i),
surface = me.chart.surface;
if (textLabel) {
if (text != textLabel.attr.text) {
textLabel.setAttributes(Ext.apply({
text: text
}, me.label), true);
textLabel._bbox = textLabel.getBBox();
}
}
else {
textLabel = surface.add(Ext.apply({
group: labelGroup,
type: 'text',
x: 0,
y: 0,
text: text
}, me.label));
surface.renderItem(textLabel);
textLabel._bbox = textLabel.getBBox();
// add event handler
if (me.label.handler && typeof(me.label.handler) == 'function') {
textLabel.on('click',Ext.pass(me.label.handler,[me, i]));
}
}
if (me.label.rotation) {
textLabel.setAttributes({
rotation: {
degrees: 0
}
}, true);
textLabel._ubbox = textLabel.getBBox();
textLabel.setAttributes(me.label, true);
} else {
textLabel._ubbox = textLabel._bbox;
}
return textLabel;
}
});
请注意,这是在extjs4.0.7上完成的我发现我必须更改
if(me.label.handler&&typeof(me.label.handler)='function'){
到if(me.handler&&typeof(me.handler)='function'){
我发现我必须将if(me.label.handler&&typeof(me.label.handler)='function'){更改为if(me.handler&&typeof(me.handler)='function'){