上午圖表無法正確顯示餅圖中的批量數據

Question

我的amChart顯示不正常，數據正在被截斷。而且我也沒有在信息框中獲取信息。 請參閱附件的截圖並提供相應的幫助。

除此之外，我該如何顯示空白記錄的圖表。即沒有數據時沒有內容可用。但我不想得到空白數據自動生成的空白圖例。

Answer 1

當空白數據時，可以使用下面的代碼。它會顯示「圖表不包含任何數據」

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

Answer 2

至於標籤，你的選擇種類有限，因爲餅圖試圖做出最大努力在不具有標籤重疊，這會導致你遇到的越界。

如果您需要看到所有的標籤，你可以嘗試調整一個或labelRadius，startAngle和pullOutRadius屬性的組合，使圖表和標籤更多的空間。

labelRadius縮小標籤距圖表的距離。

startAngle確定餅圖將開始繪製的位置。將它設置爲0將使得餅圖開始並結束於左側，其中通常在一個空間中擠滿所有標籤的空間更多。

pullOutRadius確定當您點擊它時拉出的切片的距離。將它設置爲較小的值會使圖表變大，變大會縮小它。這可以使用百分比字符串或數字值。

根據您的屏幕截圖，更有效的方法是通過將hideLabelsPercent設置爲您想要隱藏的最大值來隱藏來自非常小的切片的標籤。例如，將其設置爲3將隱藏餅圖3％的所有標籤。

至於顯示「此圖表沒有數據」，您可以使用@ RakeshTpripathi的答案，但必須禁用圖例以防止圖例顯示空值。只需在插件添加下方某處的代碼禁用傳說：

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

下面是使用這個修改的例子：

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

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

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