AmCharts 饼图标签不适合大小 DIV

Question

我正在使用 AmCharts 在 div 中渲染 3D 饼图，宽度设置为 500px，高度设置为 246px。我附上了一张我得到的图像，下面是渲染饼图的代码。我已经尝试了人类已知的每一个设置，甚至在这里查看了另一个答案：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

问题是饼图中间似乎有很多 zero-value 标签。我不确定需要在图表中实现什么样的模糊逻辑才能使如此多的标签挤在一起才能很好地显示。

常识表明，这样的 no-value 切片，如果您坚持显示 no-value 切片的标签，则将它们放在最后。

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

此外，如果在 fontSize 中使用 string-based "12pt"，标签的 auto-wrapping 会被丢弃。该参数需要一个以像素为单位的整数。即：fontSize: 15.

您还可以增加 maxLabelWidth，这样除非绝对必要，否则不会出现标签换行。在我看来，你的垂直space比水平

稀缺得多。

最后，为了把这个带回家，我建议你将整个饼图从中心移到较低的位置，以适应顶部堆积的大量标签。

为此使用 pieY 属性.

默认值为绘图区域的“50%”或 dead-on 中心。将其设置为更大的数字以将其放置得更低。 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>

AmCharts 饼图标签不适合大小 DIV

AmCharts Pie Chart Labels Won't Fit In sized DIV

amcharts