highcharts datalabel dynamic rotation as column height

问题

As you can see in the picture each column is accompanied by its datalabels, all is well. The detail is when small amounts and their datalabels is misconfigured with the categories, as seen in the picture (Red square). What I want to do is check if your height is less, to change its rotation from -90 to 0 (Green letters)

See picture of the solution (HighCharts) here:

https://docs.google.com/file/d/0B93NeaQX1VjUMldzcGIxNnBqaWc/edit

See code JSFiddle of my solution (HighCharts) here :

http://jsfiddle.net/bryan376/325dev4h/1/

This is my code push of series:

   options.series.push({
            name: 'Vendedor',
            data: arrFinal,
            dataLabels: {
                enabled: true,
                rotation: -90, //Validation height < 70 "rotation=0" else rotation=-90
                color: 'black',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '11px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        });
        var chart = new Highcharts.Chart(options);
    }

Greetings

回答1:

You can change Highcharts.Series.prototype.drawDataLabels, the function to draw the dataLabels:

Highcharts.Series.prototype.drawDataLabels = (function (func) {
    return function () {
        func.apply(this, arguments);
        if (this.options.dataLabels.enabled || this._hasPointLabels) realignLabels(this);
    };
}(Highcharts.Series.prototype.drawDataLabels));

realignLabels would be the function to check for the shorter columns, and in it change the rotation, x and y of that specific dataLabel:

function realignLabels(serie) {

    $.each(serie.points, function (j, point) {
        if (!point.dataLabel) return true;

        var max = serie.yAxis.max,
            labely = point.dataLabel.attr('y'),
            labelx = point.dataLabel.attr('x');

            if (point.y / max < 0.05) {
                point.dataLabel.attr({
                    y: labely - 20,
                    x: labelx + 5,
                    rotation: 0
                });
            }
    });
};

http://jsfiddle.net/325dev4h/7

来源：https://stackoverflow.com/questions/25391962/highcharts-datalabel-dynamic-rotation-as-column-height

标签

Highcharts