JS Amcharts - Отзывчивое положение легенды - PullRequest
Новая
       14

JS Amcharts - Отзывчивое положение легенды

1 голос
/ 05 июля 2019

JS Amcharts - Отзывчивое положение легенды о перемещении

Как быстро изменить положение легенды с «правого» на «нижнее», если, скажем, экран (изменяется) меньше 992 пикселей?

HTML: 

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

ЯШ: 

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

1 Ответ

1 голос
/ 06 июля 2019

Вы можете просто посмотреть событие изменения размера окна и изменить chart.legend.position в соответствии с шириной окна : 

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

Здесь Я раздвоил твой код ручки и добавил свое решение.

...