Question

如何在精灵上改变标签？我发现在内部系列我可以拥有以下内容，我可以改变渲染器，但问题是我还需要相应的分项。

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

我还发现here有两个功能： onCreateLabel 和 onPlaceLabel ，但我找不到使用它们的方法。

任何帮助？

Answer 1

在系列配置中使用

onCreateLabel 和 onPlaceLabel 。你必须做这样的事情：

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

从上面的代码（或ExtJS源代码）复制并粘贴 onCreateLabel 和 onPlaceLabel ，然后按照您想要的方式更改它们。

Extjs改变图表中的标签（bar，pie ......）

1 个答案: