ExtJS折线图，动态更改标记的颜色

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

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

也许，此解决方案适合您：

---

在任何指定的事件或操作中，您希望何时更改颜色

因此，我应该跳过

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

---

当我在y轴或x轴上得到一个特殊值（例如低于10）时。直到服务器上没有计算出这个值，我才知道这个值。或者我得到了一个特殊值数组，我应该将它与标记x，y位置进行比较。因此，itemclick事件不合适。请参阅此线程：您能将覆盖方法解决方案放入以完成答案吗？：）

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