Блог

Главная - Вопросы по программированию - Элементы легенды amCharts не прерываются

Элементы легенды amCharts не прерываются

#amcharts

#amcharts

Вопрос:

Пример: https://jsfiddle.net/Lkn0j5gz /

Когда я использую следующие элементы легенды, я хочу, чтобы они отображались в виде списка.

 legend: {
    position: 'absolute'
}

Не удается найти ничего полезного в
API: http://docs.amcharts.com/3/javascriptcharts/AmLegend

Ответ №1:

Если вы хотели, чтобы легенда отображала одну запись в строке, вам нужно установить maxColumns значение 1.

 legend: {
  maxColumns: 1,
  // ...
}

ДЕМОНСТРАЦИЯ:

 var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "startDuration": 0,
  "theme": "none",
  "addClassNames": true,
  "legend": {
    "position": 'absolute',
    "maxColumns": 1,
    "marginRight": 100,
    "autoMargins": false
  },
  "innerRadius": "30%",
  "defs": {
    "filter": [{
      "id": "shadow",
      "width": "200%",
      "height": "200%",
      "feOffset": {
        "result": "offOut",
        "in": "SourceAlpha",
        "dx": 0,
        "dy": 0
      },
      "feGaussianBlur": {
        "result": "blurOut",
        "in": "offOut",
        "stdDeviation": 5
      },
      "feBlend": {
        "in": "SourceGraphic",
        "in2": "blurOut",
        "mode": "normal"
      }
    }]
  },
  "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
  }],
  "valueField": "litres",
  "titleField": "country",
  "export": {
    "enabled": true
  }
});

chart.addListener("init", handleInit);

chart.addListener("rollOverSlice", function(e) {
  handleRollOver(e);
});

function handleInit() {
  chart.legend.addListener("rollOverItem", handleRollOver);
}

function handleRollOver(e) {
  var wedge = e.dataItem.wedge.node;
  wedge.parentNode.appendChild(wedge);
} 
 body, html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100%;
  width: 100%;
}

#chartdiv {
  width: 100%;
  height: 100%;
  font-size: 11px;
}

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
}    
 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Комментарии:

1. Спасибо. Значит, значение по умолчанию не работает? Согласно API -> «Максимальное количество столбцов в легенде. Если для позиции легенды установлено значение «вправо» или «влево», maxColumns автоматически устанавливается равным 1. »

2. Да, по умолчанию работает absolute не left или right , поэтому значение по умолчанию не задается, как было задумано. Последние два параметра по умолчанию равны 1.