我是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");
});
答案 0 :(得分:0)
你可以根据你的写作来更新它
chart.labelRadiusField ='labelRadius';
改变重叠 添加一些将指定距离的字段,并在 lableRadiusField 工作代码中提供该字段。 ; - )
{{1}}
答案 1 :(得分:0)
只需将chart.balloonText = "[[title]]:\u00a3[[value]]\n[[description]]";
的值更改为chart.balloonText = "[[Fund]]:\u00a3[[value]]\n[[description]]";
答案 2 :(得分:0)
在显示所有标签时,没有一致的方法可以防止重叠。
您可以使用@ {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分支中的最新版本。