Extjs用addCls（）改变绘图点的颜色，几乎得到它 [英] Extjs change color of plot points with addCls(), almost got it

问题描述

我试图使用addCls（）方法来修改Sprites，以便在点击它后更改散点图的颜色。到目前为止，我的代码更改了突出显示的颜色

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

  listeners：{
 itemclick：function（record，o）{
 console.log sprite）; 
 record.sprite.addCls（'green-sprite'）; 
} 
} 
  

我的CSS'green-sprite'像这样：

  .green-sprite {
 stroke：rgb（0,100,0） 
 fill：rgb（0,100,0）！important; 
 color：＃99CC99！important; 
} 
  

任何提示都将非常感激！

解决方案

我创建了一个简单的例子，发现它是ExtJS渲染每个分散点的方式。基本上，每个点由不止一个精灵组成。你可以通过record.sprite访问的一个是直接为数据点创建的sprite，但是，为了应用阴影，渲染几个其他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，
系列： {
 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测试，似乎做的伎俩。 / p>

I'm trying to use the addCls() method for sprites to change the color of a scatter plot point once it has been clicked on. So far, my code changes the color of the highlight that comes up when you mouse-over the point but not the color of the point itself.

Here is my itemclick listener, defined under the series config in the chart definition.

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

My css for the class 'green-sprite' looks like this:

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

Any tips would be much appreciated!

解决方案

I created a simple example and found that it's the way in which ExtJS renders each scatter point. Essentially, each point consists of more than one sprite. The one you have access to via record.sprite is the sprite created directly for the data point but then, to apply shadows, several other sprites are rendered.

If you turn off shadows for the scatter series then it should work. 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
                    }
                }]
            }
        });   

Take a look at this fiddle to see a working example: http://jsfiddle.net/JXUFN/ I've tested in Chrome and Internet Explorer 9 and it seems to do the trick.

这篇关于Extjs用addCls（）改变绘图点的颜色，几乎得到它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！