在饼图中，AM图表无法正确显示批量数据

Question

我的amChart显示不正确，数据被截断。我也没有在信息框中获取信息。 请参阅随附的屏幕截图并相应提供帮助。

除此之外，如何显示包含空白记录的图表。即没有数据时没有内容可用。但我不想得到使用空白数据自动生成的空白图例。

Answer 1

当有空白数据时，您可以使用以下代码。它将显示＆＃34;图表不包含数据＆＃34;

＆＃13;

＆＃13;

AmCharts.addInitHandler(function(chart) {
if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
  var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    // disable slice labels
    chart.labelsEnabled = false;
    
    // add label to let users know the chart is empty
    chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
    
    // dim the whole chart
    chart.alpha = 0.3;

}
}, ["pie"]);

＆＃13;

＆＃13;

＆＃13;

Answer 2

关于标签，您的选项有限，因为饼图试图尽量不让标签重叠，这可能导致您越来越难以理解。

如果您需要查看所有标签，可以尝试调整labelRadius，startAngle和pullOutRadius属性中的一个或多个，以便为图表和标签腾出更多空间

labelRadius可减少图表中标签的距离。

startAngle确定饼图开始绘制的位置。将其设置为0将使饼图开始和结束在左侧，其中通常有更多空间用于在一个空间中塞满的所有标签。

pullOutRadius确定切片时拉出的距离。将其设置为较小的值将使图表变大，较大的图表将缩小它。这需要百分比字符串或数字值。

根据您的屏幕截图，更有效的方法是通过将hideLabelsPercent设置为您要隐藏的最大值来隐藏来自非常小的切片的标签。例如，将其设置为3将隐藏＆lt; 3％的馅饼。

至于显示＆＃34;此图表没有数据＆＃34;，您可以使用@ RakeshTpripathi的答案，但您必须禁用图例以防止图例显示空值。只需在插件中的某处添加代码即可禁用图例：

//disable the legend if enabled
if (chart.legend) {
  chart.legend.enabled = false;
}

以下是使用此修改的示例：

＆＃13;

＆＃13;

/**
 * amCharts Plugin: handle empty pie chart, automatically disables legend if enabled.
 */
AmCharts.addInitHandler(function(chart) {
  
  // check if data is mepty
  if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
    // add some bogus data
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    // disable slice labels
    chart.labelsEnabled = false;
    
    // add label to let users know the chart is empty
    chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
    
    //disable the legend if enabled
    if (chart.legend) {
      chart.legend.enabled = false;
    }
    
    // dim the whole chart
    chart.alpha = 0.3;
  }
  
}, ["pie"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "legend": { "enabled": true }, //will be automatically disabled by the plugin
  "dataProvider": [],
  "valueField": "value",
  "titleField": "title"
});

＆＃13;

#chartdiv {
  width: 100%;
  height: 300px;
}

＆＃13;

<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/themes/light.js"></script>
<div id="chartdiv"></div>

＆＃13;

＆＃13;

＆＃13;