AmCharts 传奇物品不坏答案

【问题标题】：AmCharts legend items do not breakAmCharts 传奇物品不坏
【发布时间】：2021-02-16 11:45:18
【问题描述】：

当我使用以下图例项目中断时，我希望它们显示为列表。

legend: {
    position: 'absolute'
}

找不到有用的东西接口：http://docs.amcharts.com/3/javascriptcharts/AmLegend

【问题讨论】：

标签： amcharts

【解决方案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>

【讨论】：

谢谢。所以默认的不行吗？根据 API ->“图例中的最大列数。如果图例的位置设置为“右”或“左”，则 maxColumns 自动设置为 1。”
是的，默认工作absolute不是left或right，所以没有按设计设置默认值。后两个设置默认为 1。