无法在div之外绑定Amchart饼图图例，也无法帮助我进行描述中给出的自定义图例

Question

我正在研究Amcharts PIE图表，但在绑定时遇到问题div 之外的图例，我还需要饼图的自定义图例

在这里，我更新了PIE图表代码笔的代码工作

并且我无法按照ID中的给定样式绑定#PieDivID" ，一旦我删除此样式，就会出现图例，但不在正确的位置

 `#PieDivID {
  position: absolute;
  right:0px;
  top:25px;
}`

还有有人可以帮我这样安排那些传说
吗总数：4
待定：4
进行中：3
竣工：6

var tripPieChart1 = AmCharts.makeChart( "tripPieChart1", 
					 {	
						  "hideCredits" : true,
						  "color":"#000000",
						  "labelsEnabled": true,
						  "type": "pie",
						  "theme": "light",
						  "bold": true,
						  "dataProvider": [ {
							  "status": "Total",
							  "count":4,
							  "color": "#FF0F00",
							  "bold": true,
						  }, {
							  "status": "Pending",
							  "count":7,"color" : "#9C27B0"
						  }, {
							  "status": "OnGoing",
							  "count":3,  "color": "#FFBE01"
						  }, {
							  "status": "Completed",
							  "count":6, "color": "#00C853"
						  }],
						  "valueField": "count",
						  "titleField": "status",
						  "colorField": "color",
						  "depth3D": 15,
						  "angle": 25,
						  "legend":{
							    "divId": "PieDivID",
							    "autoMargins": false,
							  	"enabled" : true,
							  	"maxColumns": 1,
							  	"generateFromData": true,
							  },
						  "export": {
						    "enabled": false,
						   
						  }
						} );

#tripPieChart1 {
  width: 100%;
  height: 500px;
  font-size: 11px;
}
#PieDivID {
  position: absolute;
  right:0px;
  top:25px;
}
/*I am not able bind as per given style in this #PieDivID , as soon as i remove this style, Legend will appear but not in a right place

<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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="PieDivID"></div>
<div id="tripPieChart1"></div>

Answer 1

您需要为包含外部图例的div 指定宽度才能显示。添加min-width: 200px;就足够了，但根据需要进行调整。

图例标记的顺序取决于数据提供程序的顺序。如果希望图例标记按该顺序显示，请按该顺序对数据提供程序进行排序。在您的示例中，它已经按所需顺序排列，因此不需要额外的工作。

演示：

var tripPieChart1 = AmCharts.makeChart("tripPieChart1", {
  "hideCredits": true,
  "color": "#000000",
  "labelsEnabled": true,
  "type": "pie",
  "theme": "light",
  "bold": true,
  "dataProvider": [{
    "status": "Total",
    "count": 4,
    "color": "#FF0F00",
    "bold": true,
  }, {
    "status": "Pending",
    "count": 7,
    "color": "#9C27B0"
  }, {
    "status": "OnGoing",
    "count": 3,
    "color": "#FFBE01"
  }, {
    "status": "Completed",
    "count": 6,
    "color": "#00C853"
  }],
  "valueField": "count",
  "titleField": "status",
  "colorField": "color",
  "depth3D": 15,
  "angle": 25,
  "legend": {
    "divId": "PieDivID",
    "autoMargins": false,
    "enabled": true,
    "maxColumns": 1,
    //"generateFromData": true, //this is a custom property - not sure what this is for.
  },
  "export": {
    "enabled": false,
  }
});

#tripPieChart1 {
  width: 100%;
  height: 500px;
  font-size: 11px;
}
#PieDivID {
  position: absolute;
  right: 0px;
  min-width: 200px;
  top: 25px;
}

<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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="PieDivID"></div>
<div id="tripPieChart1"></div>

如果需要自定义图例，请查看 AmCharts 中的此示例，并对其进行修改以使用您的代码。您几乎可以复制和粘贴代码并修改变量/div 引用。