0

y軸の値に基づいてExtJS折れ線グラフのマーカーの色を条件付きで変更する方法は?

4

2 に答える 2

1

したがって、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)';
                            }
                        }
                    }
                }
            ]
于 2013-06-28T06:14:15.483 に答える
1

markerConfigの「fill」パラメータを変更する必要があります

多分、この解決策はあなたのために働くでしょう:カラープロットポイントを変更する

いつ色を変えたいですか?、特定のイベントまたはアクションで?

于 2013-06-27T07:18:16.747 に答える