Question

我正在尝试使用精灵的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;
 }

任何提示都会非常感激！

Answer 1

我创建了一个简单的例子，发现它是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
                    }
                }]
            }
        });

看看这个小提琴，看一个有效的例子：http://jsfiddle.net/JXUFN/ 我已经在Chrome和Internet Explorer 9中进行了测试，似乎可以解决问题。

Extjs用addCls（）改变绘图点的颜色，几乎得到它

1 个答案: