Question

我是AmCharts的新手，我的示例代码为JSFiddle。面对图表中标题重叠的问题。是否有任何解决方法？

 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.labelRadiusField ='labelRadius';

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

{{1}}

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分支中的最新版本。

Amcharts标签重叠

3 个答案: