Amcharts标签重叠

Question

我不熟悉AmCharts，这是我用JSFiddle编写的示例代码。面对chart.Is中的标题重叠问题，他们有什么办法解决吗？

 var chart;
    var legend;    
    var chartData = [
    {Fund:'Strategic Income' , value: 1014},{Fund:'UK & International Income' , value: 649},{Fund:'UK Equity' , value: 647},{Fund:'Global Equity Income' , value: 639},{Fund:'Equity Income' , value: 634},{Fund:'UK Income' , value: 390},{Fund:'Diversified Bond' , value: 379},{Fund:'Property' , value: 377},{Fund:'Investment Grade Corporate Bond' , value: 251},{Fund:'Corporate Bond' , value: 127}

        ];

    AmCharts.ready(function() {
        // PIE CHART
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = chartData;
        chart.titleField = "country";
        chart.valueField = "value";
        chart.percentFormatter = { precision: 1, decimalSeparator: '.', thousandsSeparator: ',' };
            chart.outlineThickness = 1;
            chart.labelText = "[[percents]]%";
            chart.hideLabelsPercent = 2.044444;
            chart.labelRadius = 35;
            chart.startRadius = "0%"; //start explode
            chart.pullOutRadius = "20%";
            chart.depth3D = 15;
            chart.angle = 40;

            chart.sequencedAnimation = false;
            chart.startDuration = 0;


        // WRITE
        chart.write("chartdiv");
    });

​

​

Answer 1

您可以根据您可以编写的内容来更新它

chart.balloonFunction = function(graphDataItem, graph) {
      return graphDataItem.dataContext.Fund + ' :\u00a3'+ graphDataItem.value;
    };

为了改变重叠，添加一些字段来指定距离，并在lableRadiusField工作代码中提供该字段。;-)

chart.labelRadiusField ='labelRadius';

http://jsfiddle.net/MehulJoshi/6sjyx79u/10/

Answer 2

只需将chart.balloonText = "[[title]]:\u00a3[[value]]\n[[description]]";的值更改为chart.balloonText = "[[Fund]]:\u00a3[[value]]\n[[description]]";

Answer 3

在显示所有标签的同时，没有一种一致的方法来防止重叠。

你可以像@MehuJoshi指出的那样使用labelRadiusField，但这取决于你的图表的尺寸和其他设置。此外，如果您有其他大小相似的切片，则必须在数据中为labelRadiusField设置其他半径。

你也可以调整图表radius -如果你的图表div的尺寸足够的话，让它变大或变小会使标签稍微移动一点：

chart.radius = "40%";

Here's a fiddle illustrating this。同样，这并不像labelRadiusField那样万无一失，因为它取决于您的大小。

一个更干净的解决方案是通过将hideLabelsPercent设置为一个上限阈值百分比值(例如，隐藏小于5%的切片的标签)来完全隐藏较小的标签，并设置图例，这将分别显示所有标签。

  chart.hideLabelsPercent = 5;
  chart.legend = { enabled: true, position: "right" };

Here's a fiddle illustrating this。请注意，我更新了titleField，使其指向Fund属性，而不是数据中不存在的country。我还定制了valueText以显示切片的值和百分比。

另外，请注意您使用的是旧版本的AmCharts (v2.11.3)。@MehuJoshi的小提琴和我的小提琴都使用v3分支中的最新版本。