2

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

我试图查看是否可以将可滚动容器添加到可以添加图例的图表中，当它溢出时，可滚动容器将添加滚动条。所以我试图覆盖“Ext.chart.Legend”，并覆盖“createBox”函数。但我不确定如何将组件添加到图表，因为 createBox() 将 Sprite 添加到图表的表面。不知道如何将“可滚动容器”添加到可以添加图例的图表中。

基本上我正在寻找看起来像附图中的图表。请帮我解决这个问题。！！我需要它尽快。提前致谢！

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

谢谢！欧米茄

4

1 回答 1

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; }
于 2016-05-16T11:25:34.067 回答