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;

提琴：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我分叉了您的密码笔并添加了解决方案。

JS Amcharts-图例的响应式位置

1 个答案: