2

項目が多すぎる Ext JS 円グラフがあります。このため凡例がオーバーフローし、ほとんどの項目が表示されません。スマートレジェンド ( https://market.sencha.com/extensions/ext-ux-chart-smartlegend ) を調べました。しかし、凡例項目が多すぎると見苦しく、Chart が小さく見えます。そこで、垂直スクロールバーを追加するソリューションを探しています(凡例がグラフの左側または右側にある場合)。

凡例を追加できるグラフにスクロール可能なコンテナーを追加できるかどうかを確認しようとしていましたが、オーバーフローすると、スクロール可能なコンテナーがスクロールバーを追加します。だから私は「Ext.chart.Legend」をオーバーライドし、「createBox」関数をオーバーライドしようとしていました。しかし、 createBox() がスプライトをチャートの表面に追加するため、コンポーネントをチャートに追加する方法がわかりません。凡例を追加できるチャートに「スクロール可能なコンテナ」を追加する方法がわかりません。

基本的に、添付画像のようなグラフを探しています。これで私を助けてください.!! 早急に必要です。前もって感謝します！

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 に答える