1

私は ExtJS 4 を使用しており、横棒グラフが機能しています。「軸:」セクションでは、フィールド ラベルをハイパーリンクにする必要があるため、チャートを見ているときに、x 軸のすべてのラベルとバー自体が、詳細を説明する別の Web ページへのリンクになります。それ。

...
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 + 」で囲みましたが、それはテキストとしてレンダリングされ、クリック可能ではありません。他のすべての検索は不足しています。テーマまたは 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;
  }
});

これはExtJS4.0.7で行われたことに注意してください

于 2012-08-02T15:00:57.210 に答える