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

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

常识规定，如果你坚持为无价值切片显示标签，那么这些无价值切片就是将它们放在最后。

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

此外，如果您使用基于字符串的＆＃34; 12pt＆＃34;则会自动包装标签。在fontSize。该参数需要以像素为单位的整数。即：fontSize: 15。

您还可以增加maxLabelWidth，这样除非绝对必要，否则不会发生标签的包装。在我看来，你的垂直空间比水平空间更加稀缺。

最后，为了驾驶这个家，我建议你将整个饼图从中心移开，以容纳顶部堆积的大量标签。

为此，请使用pieY属性。

默认为＆＃34; 50％＆＃34;或你的阴谋区的死角。将其设置为较大的数字以将其放低。即＆＃34; 65％＆＃34;

以下所有应用的图表如下图所示：

这是一个包含所有变化的实例：

＆＃13;

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": []
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: