Extjs изменить метку на графике (бар, пирог ...) - PullRequest
Новая
       25

Extjs изменить метку на графике (бар, пирог ...)

0 голосов
/ 19 сентября 2011

Как я могу изменить метку над спрайтом? Я обнаружил, что внутри серии у меня может быть следующее, и я могу изменить средство визуализации, но проблема в том, что мне также нужен соответствующий элемент store. 

label: {
  display: 'insideEnd',
  field: 'litres',
  renderer: function(n) {
    return n;
  },
  orientation: 'horizontal',
  color: '#333',
  'text-anchor': 'middle'
}

Я также нашел здесь , что есть две функции: onCreateLabel и onPlaceLabel , но я не могу найти способ их использования.

Любая помощь?

1 Ответ

1 голос
/ 22 апреля 2012

onCreateLabel и onPlaceLabel используются в конфигурации series . Вы должны сделать что-то вроде этого: 

series: [{
        // ...
        label: {
                field: 'data1',
                renderer: function(val) {
                        return val;
                }
        },
        onCreateLabel: function(storeItem, item, i, display) {
                var me = this,
                        group = me.labelsGroup,
                        config = me.label,
                        bbox = me.bbox,
                        endLabelStyle = Ext.apply(config, me.seriesLabelStyle);

                return me.chart.surface.add(Ext.apply({
                        'type': 'text',
                        'text-anchor': 'middle',
                        'group': group,
                        'x': item.point[0],
                        'y': bbox.y + bbox.height / 2
                }, endLabelStyle || {}));
        },
        onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
        var me = this,
            chart = me.chart,
            resizing = chart.resizing,
            config = me.label,
            format = config.renderer,
            field = config.field,
            bbox = me.bbox,
            x = item.point[0],
            y = item.point[1],
            bb, width, height;

        label.setAttributes({
            text: format(storeItem.get(field[index])),
            hidden: true
        }, true);

        bb = label.getBBox();
        width = bb.width / 2;
        height = bb.height / 2;

        x = x - width < bbox.x? bbox.x + width : x;
        x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
        y = y - height < bbox.y? bbox.y + height : y;
        y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;

        if (me.chart.animate && !me.chart.resizing) {
            label.show(true);
            me.onAnimate(label, {
                to: {
                    x: x,
                    y: y
                }
            });
        } else {
            label.setAttributes({
                x: x,
                y: y
            }, true);
            if (resizing) {
                me.animation.on('afteranimate', function() {
                    label.show(true);
                });
            } else {
                label.show(true);
            }
        }
    }
        // ...
}

Скопируйте и вставьте onCreateLabel и onPlaceLabel из кода выше (или источника ExtJS), затем измените их так, как вы хотите.

...