ExtJS折线图，动态改变标记颜色答案

【问题标题】：ExtJS line chart, dynamically change color of a markerExtJS折线图，动态改变标记颜色
【发布时间】：2013-06-26 13:55:22
【问题描述】：

如何根据 y 轴值有条件地更改 ExtJS 折线图的标记颜色？

【问题讨论】：

标签： extjs colors charts

【解决方案1】：

您需要更改markerConfig上的“填充”参数

也许，这个解决方案适合你：Change Color plot Points

您希望什么时候改变颜色？，在任何指定的事件或动作上？

【讨论】：

当我在 y 轴或 x 轴上有一个特殊值（例如低于 10）时。而且我不知道这个值，直到它没有在服务器上计算。
或者我有一个特殊值数组，我应该与标记 x,y 位置进行比较。
所以，itemclick 事件不合适。
查看这个帖子：stackoverflow.com/questions/13254593/…
你能把你的覆盖方法解决方案完成答案吗？ :)

【解决方案2】：

所以，我应该覆盖 drawSeries 方法。
我定义了一个新的图表线组件：

Ext.define('RogovIndex.Chart.Line', {
    extend: 'Ext.chart.series.Line',
    alias: 'series.multycolorline',
    drawSeries: function () {
    //a lot of code
}});

然后我在这部分代码触发自定义事件（“beforemarkerrender”）：

if (showMarkers) {
                count = 0;
                for (i = 0; i < ln; i++) {
                    if (me.items[i]) {
                        item = markerGroup.getAt(count++);
                        if (item) {
                            me.addEvents('beforemarkerrender');
                            me.fireEvent('beforemarkerrender', item, endMarkerStyle, store, i);
                            rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
                            item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true);
                            if (!item.attr.hidden) {
                                item.show(true);
                            }
                        }
                    }
                }
                for (; count < markerCount; count++) {
                    item = markerGroup.getAt(count);
                    item.hide(true);
                }
            }

所以，我剩下要做的就是更改 seria 的类型并订阅此事件（检查类型和侦听器部分）：

series: [
                {
                    type: 'multycolorline',
                    axis: 'left',
                    xField: 'ValueDateString',
                    yField: 'Value',
                    style: {
                        stroke: '#aaa'
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 6,
                        radius: 6,
                        'stroke-width': 0,
                        fill: 'url(#v-2)'
                    },
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    tips: {
                        trackMouse: true,
                        minWidth: 170,
                        renderer: function (storeItem, item) {
                            this.update('Value 2: ' + storeItem.get('Value'));
                        }
                    },
                    listeners: {
                        'beforemarkerrender': function (marker, markerStyle, store, index) {
                            var item = store.getAt(index);
                            if (item.get('Equal')) {
                                markerStyle.fill = 'url(#v-1)';
                            } else {
                                markerStyle.fill = 'url(#v-2)';
                            }
                        }
                    }
                }
            ]

【讨论】：