HighChart如何在格式化程序中根据其值动态设置dataLabel位置

时间:2015-07-20 20:31:19

标签: javascript highcharts

我尝试通过'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);
});

0 个答案:

没有答案