2017-11-03 3 views
0

私は凡例(レイアウト=縦)を持つハイチャートを持っています。残念ながら伝説の高さはパイに影響を与えます。これは、グラフの項目が多いほど円グラフが小さくなることを意味します。また、容器の高さも影響を与えているようです。 私の目的は、固定された円のサイズを持ち、ラッパーコンテナは凡例の高さとともに成長する必要があります。これは可能ですか?どうやって?ここ は、JSの一部です:凡例の高さが円のサイズに影響するようです。

$(function() { 
var chart; 

$(document).ready(function() { 

    // Build the chart 
    $('#container').highcharts({ 
     chart: { 
         type: 'pie' 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     legend:{ 
      align: 'center', 
      enabled: true, 
      layout: 'vertical', 
      verticalAlign: 'bottom' 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       ['Chrome', 12.8], 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7], 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       ['Chrome', 12.8], 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7], 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       ['Chrome', 12.8], 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7], 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       ['Chrome', 12.8], 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
    }); 
}); 

}); 

そして、ここでHTMLの一部です:あなたは、伝説の高さを取得し、実際のチャートの高さに追加し、上setSize機能を使用して新しい高さを設定することができます

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container"></div> 
+0

あなたは[legend.maxHeight](https://api.highcharts.com/highcharts/legend.maxHeight)チェックを使用することができますhttp://jsfiddle.net/c4j9yn9e/ –

答えて

関連する問題