6

I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.

Below is the ExtJS code.

Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [{
        'name': 'January',
        'data1': 10
    }, {
        'name': 'February',
        'data1': 7
    }, {
        'name': 'March',
        'data1': 5
    }, {
        'name': 'April',
        'data1': 2
    }, {
        'name': 'May',
        'data1': 27
    }]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    animate: true,
    store: store,
    theme: 'Base:gradients',
    legend: { // Pie Chart Legend Position
        position: 'right'
    },
    series: [{
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item){
                //calculate and display percentage on hover
                var total = 0;
                store.each(function(rec){
                    total += rec.get('data1');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 5
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        },
        listeners: {//This Doesnt Work :(
            itemclick: function(o){
                alert('clicked at : ' + o);
            }
        }

    }],
    listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked ..................................
        click: {

            element: store, //bind to the underlying el property on the panel
            fn: function(o, a){

                alert('clicked' + o + a + this);
            }
        }

    }

});

});

Kindly help.

Regards, Lalit

4

2 に答える 2

12

クリックしたスライスのデータを取得する方法は次のとおりです。シリーズ クラスは、Observable 構文を介してリスナーをサポートします。リスナーは次のとおりです。

  1. itemmouseupユーザーがマーカーを操作したとき。
  2. itemmousedownユーザーがマーカーを操作したとき。
  3. itemmousemoveユーザーがマーカーを繰り返し操作したとき。
  4. afterrenderアニメーションが終了したとき、またはシリーズが完全にレンダリングされたときにトリガーされます。

イベントを利用してitemmousedown、クリックされたスライスをキャプチャします。これが私のリスナーメソッドです：

series: [{
        .
    .
    .
    listeners:{
        itemmousedown : function(obj) {
        alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']);
    }
    }
    .
}]

チャートではなくシリーズ内にリスナーを配置したことに注意してください。現在、obj変数には多くの情報が保持されています。シリーズごとに、データを取得するプロパティが異なります。そのため、firebug またはその他の開発者ツールを使用して、オブジェクトを注意深く検査する必要があります。

現在、円グラフの場合、以下を使用してスライス情報を取得できますobj。

obj.storeItem.data['your-series-variable-name']

これがobjfirebugの.. ここに画像の説明を入力

于 2011-05-11T19:52:42.887 に答える
0

グラフにドラッグ アンド ドロップを実装するためにカスタム ロジックを追加する必要があったため、より選択的なアプローチを使用しています。したがって、チャート定義の後に、次を追加するだけです。

// Add drag-and-drop listeners to the sprites
var surface = chart.surface;
var items = surface.items.items;
for (var i = 0, ln = items.length; i < ln; i++) {
    var sprite = items[i];
    if (sprite.type != "circle") { continue; } // only add listeners to circles
    // Additional funky checks for the draggable sprites
    sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites
}
surface.on("mousemove", onSurfaceMouseMove, surface);  // mouse move for the entire surface
surface.on("mouseup", onSurfaceMouseUp, surface);

乾杯！フランク

于 2014-09-15T18:52:19.927 に答える