Question

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

如何处理饼图中的数据？是否有任何方法可以显示非活动饼图（禁用饼图或其他内容）？

Answer 1

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

即：

＆＃13;

/**
 * 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"
});

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

＆＃13;

饼图中如何处理无数据？

1 个答案: