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

Question

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

当假设屏幕(调整大小)小于 992px 时，如何响应地将图例的位置从“右”更改为“底部”？

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并根据 window width 更改 chart.legend.position :

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

Here我 fork 了你的代码笔并添加了我的解决方案。