Extjs圖表圖例項目溢出時帶滾動條的圖例項目

Question

我有一個包含太多項目的Ext JS餅圖。由於這個圖例溢出並且很少有項目不可見。我看了一下Smart傳說（https://market.sencha.com/extensions/ext-ux-chart-smartlegend）。但是當圖例項目太多時，這看起來很難看，並且這使得Chart看起來很小。所以我正在尋找一個解決方案，它將添加一個垂直滾動條（當圖例位於圖的左側或右側時）。

我想看看是否可以將可滾動容器添加到圖形上，我可以添加圖例，當它溢出時，可滾動容器將添加滾動條。所以我試圖重寫「Ext.chart.Legend」，並覆蓋「createBox」函數。但我不確定如何將組件添加到圖表，因爲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; }