AmCharts 图例项目不会中断

编程问答 2022-05-25

问题描述

示例：https://jsfiddle.net/Lkn0j5gz/

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

legend: {
    position: 'absolute'
}

找不到任何有用的东西 API：http://docs.amcharts.com/3/javascriptcharts/AmLegend

解决方法

如果您希望图例每行显示一个条目，则需要将 maxColumns 设置为 1。

 Class Directory     Files Processed  Files Verified  Files Removed 
       savory               20               20              0       
      unsavory              21               20              0       
processed  41  files   40 files were verified   0  files were removed
['c:\\temp\\people\\storage\\unsavory\\040.xyz']

演示：

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);
}

amcharts