Question

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

Answer 1

上的“填充”参数

也许，此解决方案适合您：Change Color plot Points

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

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

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

2 个答案: