如何处理饼图中没有数据？

Question

我目前正在使用 amCharts 插件中的饼图。有时我不得不面对饼图中没有数据的情况。在这种情况下，amCharts 不加载图表。

饼图没有数据怎么办？有什么方法可以显示非活动饼图（禁用饼图或其他）？

Answer 1

您可以使用AmCharts.addInitHandler 函数来设置自定义函数以在绘制图表之前调用。您可以使用它来检查 dataProvider 是否为空并对图表进行各种修改。

即：

/**
 * amCharts Plugin: handle empty pie chart
 */
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)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    // disable slice labels and balloons
    chart.labelsEnabled = false;
    chart.balloonText = "";
    
    // 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"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "value",
  "titleField": "title"
});

<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="chartdiv" style="width: 100%; height: 400px;"></div>

如何处理饼图中没有数据？

How to handle No Data in pie chart?

amcharts