如何解决AmCharts 图例项目不会中断
示例: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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。