javascript - Amchart Legend 位置没有变化

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#container 的类(顶部、底部、右侧和左侧)图例已定位到位。可以关联一个 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;
}