Javascript Extjs使用addCls（）更改打印点的颜色，几乎成功

我正在尝试使用精灵的addCls（）方法，在单击散点图点后更改散点图点的颜色。到目前为止，我的代码更改鼠标悬停在点上时出现的高光的颜色，而不是点本身的颜色

这是我的itemclick侦听器，在图表定义中的series配置下定义

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

“绿色精灵”类的css如下所示：

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

---

任何提示都将不胜感激

我创建了一个简单的示例，发现这是ExtJS渲染每个分散点的方式。本质上，每个点由多个精灵组成。您可以通过record.sprite访问的精灵是直接为数据点创建的精灵，但为了应用阴影，会渲染其他几个精灵

如果关闭“散射”系列的阴影，则它应该可以工作。e、 g

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

看看这把小提琴，看看一个有效的例子：

---

我在Chrome和InternetExplorer9中进行了测试，它似乎做到了这一点。

我创建了一个简单的示例，发现这就是ExtJS渲染每个分散点的方式。本质上，每个点由多个精灵组成。您可以通过record.sprite访问的精灵是直接为数据点创建的精灵，但为了应用阴影，会渲染其他几个精灵

如果关闭“散射”系列的阴影，则它应该可以工作。e、 g

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

看看这把小提琴，看看一个有效的例子：

---

我已经在Chrome和Internet Explorer 9上进行了测试，它似乎很管用。

谢谢！有没有办法用css来改变点的大小？我认为仅仅使用css是不可能的。点的大小由圆的半径定义，该半径只能通过JavaScript设置。看看这个问题，它可能会有所帮助：我最终使用了：sprite.setAttributes（{scale:{x:1.5，y:1.5}，true）；将大小增加1.5x和sprite.setAttributes（{scale:{x:1，y:1}，true）；让它回到原来的尺寸，谢谢！有没有办法用css来改变点的大小？我认为仅仅使用css是不可能的。点的大小由圆的半径定义，该半径只能通过JavaScript设置。看看这个问题，它可能会有所帮助：我最终使用了：sprite.setAttributes（{scale:{x:1.5，y:1.5}，true）；将大小增加1.5x和sprite.setAttributes（{scale:{x:1，y:1}，true）；将其设置回原始大小