Javascript 图表图例位置未更改

当出现一个大的传奇时，我面临着图表大小的问题，我发现了这篇文章 这个解决方案的问题是，我不能把图例放在图表的顶部、左侧甚至右侧，它总是卡在底部。有没有办法解决这个问题

下面是我想做的一个例子

JS文件 `

`

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>

顶部
左边
正确的
底部
图表组：


图例组：

---

提前谢谢

我使用了您发布的第一个链接的示例，它已经在JSFIDLE中，在这里使用更好

更改div#container（顶部、底部、右侧和左侧）图例的类别已定位到位。可以关联一个javascript事件来选择更改类，但我还没有这样做。我希望你能理解我糟糕的英语

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>

---

我使用了您发布的第一个链接的示例，它已经在JSFIDLE中，在这里更适合使用

更改div#container（顶部、底部、右侧和左侧）图例的类别已定位到位。可以关联一个javascript事件来选择更改类，但我还没有这样做。我希望你能理解我糟糕的英语

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>

---

你是认真的吗？如果你仅仅通过改变div的顺序来观察这个例子，你会发现上面有一个图例：使用一些基本的CSS，你可以把它放在右边或左边。谢谢你的回答，但我这里的问题是，位置是根据输入而变化的，它不是静态的，所以我不能仅仅通过把div放在顶部来改变它，这不是我的解决办法你能把你的代码放在这里吗？你认真试过了吗？如果你仅仅通过改变div的顺序来观察这个例子，你会发现上面有一个图例：使用一些基本的CSS，你可以把它放在右边或左边。谢谢你的回答，但我这里的问题是，位置是根据输入而变化的，它不是静态的，所以我不能仅仅通过把div放在顶部来改变它，这不是我的解决方案你能把代码放在这里吗？

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;
}