Question

我有一个包含太多项目的Ext JS饼图。由于这个传说溢出，很少有项目不可见。我看了一下Smart legends（https://market.sencha.com/extensions/ext-ux-chart-smartlegend）。但是当传奇项目太多时，这看起来很难看，这使得图表看起来很小。所以我正在寻找一个解决方案，它会添加一个垂直滚动条（当图例位于图形的左侧或右侧时）。

我试图看看是否可以将可滚动容器添加到我可以添加图例的图表中，当它溢出时，可滚动容器会添加滚动条。所以我试图覆盖“Ext.chart.Legend”，并覆盖'createBox'功能。但是我不确定如何将组件添加到Chart中，因为createBox（）会将Sprite添加到图表的表面。不确定如何将“可滚动容器”添加到我可以添加图例的图表中。

基本上我正在寻找附图中的图形。请帮帮我。!!我尽快需要它。提前谢谢！

https://www.dropbox.com/s/4q9o6v5ei4ba96r/Chart%20Legend%20items%20with%20scroll%20bar.png

谢谢！欧米茄

Answer 1

JavaScript的：

    Ext.override(Ext.chart.Legend, {


        createItems: function() {
            if (this.customLegend != null) {
                this.customLegend.remove();
            }

            this.customLegend = $('<div class="custom-legend"></div>');
            $(this.chart.el.dom).append(this.customLegend);
            this.callParent();
        },

        createLegendItem: function(series, yFieldIndex) {
            var colorItem = series.getLegendColor(yFieldIndex).match(/.+?\-(.+?)\-.+?/i)[1];
            var legendItem = $('<div class="custom-legendItem"><div class="custom-legendItemMarker" style="background-color: #'+colorItem+'"></div>'+series.yField[yFieldIndex]+'</div>');
            $(this.customLegend).append(legendItem);

            legendItem.on('mouseover', function() {
                series._index = yFieldIndex;
                series.highlightItem();
            });

            legendItem.on('mouseout', function() {
                series._index = yFieldIndex;
                series.unHighlightItem();
            });

            legendItem.on('mousedown', function() {
                var me = this,
                    index = yFieldIndex;

                if (!me.hiddenSeries) {
                    series.hideAll(index);
                    legendItem.addClass('hide');
                } else {
                    series.showAll(index);
                    legendItem.removeClass('hide');
                }
                me.hiddenSeries = !me.hiddenSeries;
                me.legend.chart.redraw();
            });
        },
        updateItemDimensions: function() {
            return {
                totalWidth:  0,
                totalHeight: 0,
                maxWidth:    0,
                maxHeight:   0
            };
        },
        updatePosition: function() {

        },
        removeItems: function() {
        }
    });

CSS：

.custom-legend {
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    overflow-y: auto;
    border: 1px solid #CCC;
    padding: 20px;
    min-width: 200px;
}
.custom-legendItem {
    margin: 4px 0;
}
.custom-legendItem.hide {
    opacity: 0.5;
}
.custom-legendItem:hover {
    cursor: pointer;
    font-weight: bold;
}
.custom-legendItemMarker { display: inline-block; width: 12px; height: 12px; margin-right: 12px; }

当图例项溢出时，带有滚动条的Extjs Chart图例项

1 个答案: