AmCharts 饼图标签不适合大小的 DIV

Question

我正在使用 AmCharts 在 div 内渲染 3D 饼图，宽度设置为 500 像素，高度设置为 246 像素。我附上了我得到的图像，下面是呈现饼图的代码。我已经尝试了人类已知的所有设置，甚至在这里查看了其他答案：Labels are cropped in drill-down pie chart (amCharts) 但是该答案不适用于我的。我已经尝试了该答案中的所有内容，并且标签仍然在 DIV 中裁剪。我已经与 DIV 接壤，所以你可以看到它在哪里。您可以看到标签位于自身之上，并且也在 DIV 之外呈现。任何有关如何创建这些饼图以遵守 DIV 大小的帮助将不胜感激，以便它们可以正确导出到图像。谢谢。

IMAGE SHOWING CHART POOR LABEL RENDERING

var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
        "type": "pie",
        "theme": "light",
        "colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
        //autoMargins: false,
        //marginTop: 60,
        //marginBottom: 0,
        //marginLeft: 0,
        //marginRight: 0,
        //pullOutRadius: 0,
        fontSize: "12pt",
        fontFamily: "Tahoma",
        "dataProvider": [
            {
                "desc": "Consum Discr",
                "FullBalloonDescription": "Consum Discr",
                "value": 10.0
            }, {
                "desc": "Consum Stpls",
                "FullBalloonDescription": "Consum Stpls",
                "value": 0.0
            }, {
                "desc": "Energy",
                "FullBalloonDescription": "Energy",
                "value": 0.0
            }, {
                "desc": "Fincls",
                "FullBalloonDescription": "Fincls",
                "value": 0.0
            }, {
                "desc": "Hlth Care",
                "FullBalloonDescription": "Hlth Care",
                "value": 0.0
            }, {
                "desc": "Industrials",
                "FullBalloonDescription": "Industrials",
                "value": 0.0
            }, {
                "desc": "Info Tech",
                "FullBalloonDescription": "Info Tech",
                "value": 63.0
            }, {
                "desc": "Materials",
                "FullBalloonDescription": "Materials",
                "value": 0.0
            }, {
                "desc": "Telecom Srv",
                "FullBalloonDescription": "Telecom Srv",
                "value": 27
            }, {
                "desc": "Other",
                "FullBalloonDescription": "Other",
                "value": 0.0
            }
        ],
        showZeroSlices: true,
        percentPrecision: 0,
        labelRadius: 5,
        "radius": "40%",
        "startAngle": 55,
        "maxLabelWidth": 100,
        "innerRadius": "0%",
        "valueField": "value",
        "titleField": "desc",
        "outlineAlpha": 0.4,
        "depth3D": 15,
        "balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
        "angle": 55,
        "export": {
            "enabled": true,
            "libs": {
                "path": "/Scripts/amcharts/plugins/export/libs/"
            },
            "menu": []
        }
    });

Answer 1

问题是饼图中间似乎有很多零值标签。我不确定需要在图表中实现什么模糊逻辑来适应如此大量的标签挤在一起才能很好地显示。

常识表明，如果您坚持为无值切片显示标签，则将它们放在最后。

amCharts 有一个逻辑来处理最后出现的大量标签，方法是将对齐等分到左和右。

---

此外，如果您在 fontSize 中使用基于字符串的“12pt”，标签的自动换行将被取消。该参数需要一个以像素为单位的整数。即：fontSize: 15.

您也可以增加maxLabelWidth，这样除非绝对必要，否则不会发生标签的换行。在我看来，您的垂直空间比水平空间稀缺得多。

---

最后，为了把这个带回家，我建议你将整个饼图从中心移到下方，以容纳顶部堆积的大量标签。

要做到这一点，请使用pieY 属性。

默认值为“50%”或您的绘图区域的中心位置。将其设置为较大的数字以将其放置在较低的位置。 IE。 “65%”。

---

以下是您的图表在应用上述所有内容后的样子：

这是一个包含所有更改的实时示例：

var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
  "type": "pie",
  "theme": "light",
  "colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
  //autoMargins: false,
  //marginTop: 60,
  //marginBottom: 0,
  //marginLeft: 0,
  //marginRight: 0,
  //pullOutRadius: 0,
  fontSize: "12pt",
  fontFamily: "Tahoma",
  "pieY": "65%",
  "dataProvider": [{
    "desc": "Consum Discr",
    "FullBalloonDescription": "Consum Discr",
    "value": 10.0
  }, {
    "desc": "Info Tech",
    "FullBalloonDescription": "Info Tech",
    "value": 63.0
  }, {
    "desc": "Telecom Srv",
    "FullBalloonDescription": "Telecom Srv",
    "value": 27
  }, {
    "desc": "Consum Stpls",
    "FullBalloonDescription": "Consum Stpls",
    "value": 0.0
  }, {
    "desc": "Energy",
    "FullBalloonDescription": "Energy",
    "value": 0.0
  }, {
    "desc": "Fincls",
    "FullBalloonDescription": "Fincls",
    "value": 0.0
  }, {
    "desc": "Hlth Care",
    "FullBalloonDescription": "Hlth Care",
    "value": 0.0
  }, {
    "desc": "Industrials",
    "FullBalloonDescription": "Industrials",
    "value": 0.0
  }, {
    "desc": "Materials",
    "FullBalloonDescription": "Materials",
    "value": 0.0
  }, {
    "desc": "Other",
    "FullBalloonDescription": "Other",
    "value": 0.0
  }],
  showZeroSlices: true,
  percentPrecision: 0,
  labelRadius: 5,
  "radius": "40%",
  //"startAngle": 55,
  "maxLabelWidth": 150,
  "innerRadius": "0%",
  "valueField": "value",
  "titleField": "desc",
  "outlineAlpha": 0.4,
  "depth3D": 15,
  "balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "angle": 55,
  "export": {
    "enabled": true,
    "libs": {
      "path": "/Scripts/amcharts/plugins/export/libs/"
    },
    "menu": []
  }
});

#reportingSummaryStockHoldingsPieDiv {
  width: 500px;
  height: 246px;
  border: 1px solid #ccc;
  margin: auto;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="reportingSummaryStockHoldingsPieDiv"></div>