1

スプライトにaddCls（）メソッドを使用して、クリックされた散布図ポイントの色を変更しようとしています。これまでのところ、私のコードは、ポイントの上にマウスを置いたときに表示されるハイライトの色を変更しますが、ポイント自体の色は変更しません。

これが私のitemclickリスナーで、チャート定義のシリーズ構成で定義されています。

               listeners: {
                    itemclick: function(record, o){
                            console.log(record.sprite);
                            record.sprite.addCls('green-sprite');
                    }
               }

クラス「green-sprite」のCSSは次のようになります。

 .green-sprite{
    stroke: rgb(0,100,0) !important;
    fill: rgb(0,100,0) !important;
    color: #99CC99 !important;
 }

ヒントをいただければ幸いです。

4

1 に答える 1

1

簡単な例を作成したところ、ExtJSが各散布点をレンダリングする方法であることがわかりました。基本的に、各ポイントは複数のスプライトで構成されます。record.spriteを介してアクセスできるのは、データポイント用に直接作成されたスプライトですが、シャドウを適用するために、他のいくつかのスプライトがレンダリングされます。

スキャッターシリーズのシャドウをオフにすると、機能するはずです。例えば

var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            hidden: false,
            shadow: false,
            maximizable: true,
            title: 'Scatter Chart Renderer',
            renderTo: Ext.getBody(),               
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: store1,
                axes: false,
                shadow: false,
                insetPadding: 50,            
                series: [{
                    type: 'scatter',
                    axis: false,
                    xField: 'data1',
                    yField: 'data2',
                    listeners: {
                        itemmouseup: function(record, o)
                        {
                            record.sprite.addCls('green-sprite');
                        }
                    },
                    color: '#ccc',
                    markerConfig: {
                        type: 'circle',
                        radius: 20,
                        size: 20
                    }
                }]
            }
        });

このフィドルを見て、実際の例を確認してください。http: //jsfiddle.net/JXUFN/Chrome とInternetExplorer 9でテストしましたが、うまくいくようです。

于 2013-03-10T21:26:21.160 に答える