Amchart凡例の位置が変更されていません

Question

大きい伝説があるときにグラフのサイズに問題があります。この記事が見つかりましたPutting a legend outside the chart area このソリューションの問題は私が凡例を上に置くことができないことですチャートの左端または右端のいずれかに表示されている場合、常に下に固定されています。任意のアイデアをどのようにこれを解決する。ここで

は私が

JSファイル `

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "pie", 
    "startDuration": 0, 
    "theme": "light", 
    "addClassNames": true, 
    "legend": { 
    "divId" : "legenddiv", 

    }, 
    "innerRadius": "30%", 
    "dataProvider": [{ 
    "country": "Lithuania", 
    "litres": 501.9 
    }, { 
    "country": "Czech Republic", 
    "litres": 301.9 
    }, { 
    "country": "Ireland", 
    "litres": 201.1 
    }, { 
    "country": "Germany", 
    "litres": 165.8 
    }, { 
    "country": "Australia", 
    "litres": 139.9 
    }, { 
    "country": "Austria", 
    "litres": 128.3 
    }, { 
    "country": "UK", 
    "litres": 99 
    }, { 
    "country": "Belgium", 
    "litres": 60 
    }, { 
    "country": "The Netherlands", 
    "litres": 50 
    }, { 
    "country": "Lithuania", 
    "litres": 501.9 
    }, { 
    "country": "Czech Republic", 
    "litres": 301.9 
    }, { 
    "country": "Ireland", 
    "litres": 201.1 
    }, { 
    "country": "Germany", 
    "litres": 165.8 
    }, { 
    "country": "Australia", 
    "litres": 139.9 
    }, { 
    "country": "Austria", 
    "litres": 128.3 
    }, { 
    "country": "UK", 
    "litres": 99 
    }, { 
    "country": "Belgium", 
    "litres": 60 
    }, { 
    "country": "The Netherlands", 
    "litres": 50 
    }], 
    "valueField": "litres", 
    "titleField": "country" 
}); 

var legend = new AmCharts.AmLegend(); 
legend.position = document.getElementById("mySelect").options; 
chart.addLegend(legend, "legenddiv"); 

`

htmlファイル

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="http://www.amcharts.com/lib/3/pie.js"></script> 
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script> 
<select id="mySelect"> 
    <option>top</option> 
    <option>left</option> 
    <option>right</option> 
    <option>Bottom</option> 
</select> 
Chart div: 
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div> 

<br /> 
Legend div: 
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div> 

http://codepen.io/anon/pen/dXbjrJ

をやりたいの例です。

ありがとうございます。

Answer 1

あなたが投稿した最初のリンクの例を使用しましたが、既にjsfiddleにあり、ここでの使用に適しています。

div＃コンテナ（上端、下端、右端および左端）凡例のクラスを変更すると、その位置に配置されます。クラスを変更するために選択するjavascriptイベントを関連付けることができますが、私は行っていません。私は恐ろしい英語を理解してくれることを願っています。

http://jsfiddle.net/blonfu/4L0865Lv/2/

HTML

<div id="container" class="right"> 
    <div class="chart"> 
    Chart div: 
    <div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div> 
    </div> 
    <div class="legend"> 
    Legend div: 
    <div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div> 
    </div> 
</div> 

CSS

body { 
    font-family: Verdana; 
    padding: 15px; 
} 

#legenddiv { 
    height: 100px !important; 
    /* force that height */ 
    overflow: auto; 
    position: relative; 
} 

#container { 
    display: flex; 
} 

#container > div { 
    flex-grow: 1; 
    position: relative; 
} 

.top { 
    flex-direction: column; 
} 

.top .legend { 
    order: -1 
} 

.bottom { 
    flex-direction: column; 
} 

.bottom .chart { 
    order: 1; 
} 

.right, 
.left { 
    flex-direction: row; 
} 

.right > div, 
.left > div { 
    flex-basis: 50%; 
    width: 50%; 
} 

.left .legend { 
    order: -1; 
} 

.right #legenddiv, 
.left #legenddiv { 
    height: 250px !important; 
}