Question

当有一个大传说时，我面对图表大小的问题，我发现这篇文章Putting a legend outside the chart area 这个解决方案的问题在于我无法将图例放在图表的顶部或左侧或者甚至是右侧，它总是卡在底部。任何想法如何解决这个问题。

这是我想要做的一个例子

JS文件 `

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>

`

html文件

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");

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

Amchart Legend位置不变

1 个答案: