JS Amcharts - 图例的响应式重新定位位置

Question

JS Amcharts - 图例的响应式重定位

当假设屏幕（调整大小）小于 992px 时，如何响应地将图例的位置从 "right" 更改为 "bottom"？

html:

<div id="chartdiv"></div>

js:

var chart = am4core.create("chartdiv", am4charts.PieChart);

chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "The Netherlands",
  "litres": 50,
  "hidden": true
}];

var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.dataFields.hidden = "hidden";

chart.legend = new am4charts.Legend();
chart.legend.fontSize = 12;
chart.legend.position = "right";
chart.legend.markers.template.width = 12;
chart.legend.markers.template.height = 12;

Fiddle: https://codepen.io/anon/pen/wLEomN

Answer 1

你可以 watch the window resize event and change the chart.legend.position according to the window width:

window.addEventListener('resize', () => {
  if (window.innerWidth < 992) {
    chart.legend.position = "bottom";
  } else {
    chart.legend.position = "right";
  }
}, true);

Here我fork了你的码笔，添加了我的方案。

JS Amcharts - 图例的响应式重新定位位置

JS Amcharts - Responsive relocate position of legend

javascript

amcharts

amcharts4