AM图表无法正确显示饼图中的批量数据 [英] AM Chart not displaying properly with bulk data in pie chart

问题描述

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

My amChart is not showing properly, datas are getting truncated. And I am not getting the information in info box as well. Please refer to the screenshot attached and help accordingly.

此外，如何显示带有空白记录的图表.即没有数据时无可用内容.但是我不想得到空白图例，它会与空白数据一起自动生成.

Beside that how can I show a chart with blank record. ie No content available when there is no data. But I dont want to get the blank legends which are generating automatically with blank data.

推荐答案

对于标签，您的选择种类有限，因为饼图会尽最大努力避免标签重叠，从而导致标签重叠您正在经历的边界渲染.

With regards to the labels, your options kind of limited as the pie chart tries to make a best effort in not having the labels overlap, which can cause the out of bounds rendering you're experiencing.

如果需要查看所有标签，则可以尝试调整 startAngle 和 pullOutRadius 属性可为图表和标签腾出更多空间.

If you need to see all the labels, you can try to adjust one or a combination of the labelRadius, startAngle and pullOutRadius properties to make more room for the chart and labels.

labelRadius减少标签与图表的距离.

labelRadius reduces distance of labels from the chart.

startAngle确定饼图将从何处开始绘制.将其设置为0将使饼图在左侧开始和结束，在该位置通常将所有标签塞满一个空格的空间更大.

startAngle determines where the pie chart will start drawing. Setting it to 0 will make the pie start and end on the left, where there is usually more space for all the labels crammed in one space.

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

pullOutRadius determines the distance of the slice pull out when you click on it. Setting it to a smaller value will make the chart bigger, larger will shrink it. This takes either a percentage string or numeric values.

鉴于您的屏幕截图，一种更有效的方法是通过设置 hideLabelsPercent 到要隐藏的最大值.例如，将其设置为3将隐藏所有<占馅饼的3％.

Given your screenshot, a more effective approach is to hide the labels coming from the very small slices by setting hideLabelsPercent to the maximum value that you want to hide. For example, setting it to 3 will hide all labels that are < 3% of the pie.

关于显示此图表没有数据"，可以使用@RakeshTpripathi的答案，但是必须禁用图例以防止图例显示空值.只需将以下代码添加到插件中的某处即可停用图例:

As for displaying "This chart has no data", you can work with @RakeshTpripathi's answer, but you have to disable the legend to prevent the legend from showing the empty values. Just add the code below somewhere in the plugin to disable the legend:

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

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

Here's an example which uses this modification:

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

这篇关于AM图表无法正确显示饼图中的批量数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！