我尝试通过'HighChart'绘制极坐标图表,每个系列都有0到100之间的2个数据类别,这些数据类别在另一个上有重叠。 我的问题是当数据值大于90时,2类别的dataLabel有重叠。 我想通过格式化函数动态设置dataLabel位置。 我所有尝试这样做都失败了。 有解决方案来解决这个问题吗?
下面是我的简化代码。在这个JSFiddle.net中,您可以看到结果并对其进行编辑
var chart;
var options={
chart:
{
renderTo: 'container',
type: 'column',
polar: true
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
gridLineWidth: 0,
labels:
{
enabled: false
}
},
colors: ['#F47414', '#A8CBFF'],
plotOptions:
{
column:
{
grouping: false,
shadow: false
},
series:
{
dataLabels:
{
enabled: true /// for use My solution, comment this line
/* ------------------------------------------------------------
/// My solution is using formatter to set y align based on value. But I don't know why this don't work.
enabled: true,
formatter: function ()
{
if (this.y>=90 && this.y<100)
{
console.log(this.series.options.dataLabels.y);
this.series.options.dataLabels.y =+ 20;
}
}
---------------------------------------------------------------*/
}
}
},
series:
[
{name: 'GoalPerecent', data:[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]},
{name: 'ActualPerecent', data:[95, 20, 23, 45, 98, 10, 35, 73, 33, 85, 64, 10]}
]
}
$(document).ready(function()
{
chart = new Highcharts.Chart(options);
});