高度图数据标签动态旋转作为列高度 [英] highcharts datalabel dynamic rotation as column height

问题描述

正如你在图片中看到的每一列都伴随着它的数据标签，一切都很好。详细情况是当少量数据标签与其类别错误配置时，如图片所示（红色方块）。我想要做的是检查你的身高是否减少，将其旋转从-90改变为0（绿色字母）。b / b

在这里查看解决方案图片（HighCharts） ：

https：// docs .google.com / file / d / 0B93NeaQX1VjUMldzcGIxNnBqaWc /编辑

请参阅我的解决方案（HighCharts）的JSFiddle代码：

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

这是我的系列代码推送：

 选项。 series.push（{
 name：'Vendedor'，
 data：arrFinal，
 dataLabels：{
 enabled：true，
 rotation：-90，// Validation高度<70旋转= 0其他旋转= -90 
颜色：'黑色'，
 align：'right'，
x：4，
 y：10，
 style：{
 fontSize：'11px'，
 fontFamily：'Verdana，sans-serif'
} 
} 
}） ; 
 var chart = new Highcharts.Chart（options）; 
 
 $ / code> 

问候


可以改变 Highcharts.Series.prototype.drawDataLabels ，绘制 dataLabels $ b $ pre $ 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 是检查较短的列，并在其中更改轮换， x 和 y c $ c $> code $> c $> c $> $函数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：labely - 20，
x：labelx + 5，
rotation：0
） ）;
}
}）;
};


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

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

解决方案

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

这篇关于高度图数据标签动态旋转作为列高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！