1

我正在使用 ExtJS 4 并且有一个工作水平条形图。在“轴：”部分中，我需要将字段标签作为超链接，因此当您查看图表时，x 轴上的所有标签以及条形本身都将是指向另一个网页的链接，该网页描述了更多关于它。

...
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 + ' 包围它，但这只是将其呈现为文本，没有可点击性。所有其他搜索都不足。我在 Themes 或 LabelLinks 上看到了一些东西，但无法在我的特定设置中使用这些东西。任何帮助，将不胜感激。

4

2 回答 2

1

我就是这样做的。您可以通过覆盖 Axis.js 中的 getOrCreateLabel 方法将“单击”事件处理程序附加到轴标签。

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); 
        ...
    }
});
于 2012-06-25T03:30:09.113 回答
0

这是我基于科伦坡的解决方案。

此版本允许您在声明轴时设置处理程序。此外，它允许您检索标签索引，并且仅将覆盖应用于Category轴，因为无论如何我们对单击其他类型的轴不感兴趣。

轴声明：

...
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;
  }
});

请注意，这是在ExtJS 4.0.7上完成的

于 2012-08-02T15:00:57.210 回答