1

我正在尝试使用精灵的 addCls() 方法来更改散点图点的颜色，一旦它被单击。到目前为止，我的代码更改了当您将鼠标悬停在该点上时出现的突出显示的颜色，而不是该点本身的颜色。

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

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

任何提示将不胜感激！

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 和 Internet Explorer 9 中进行了测试，它似乎可以解决问题。

于 2013-03-10T21:26:21.160 回答