Question

我想在溢出时在x范围图中的数据框中裁剪标签。我该怎么办？

要点代码：

{
    x: Date.UTC(2014, 11, 8),
    x2: Date.UTC(2014, 11, 9),
    y: 2,
    dataLabels:[{
        format: '54687687',
        crop: true
         }]
}

jsfiddle中的示例：https://jsfiddle.net/levra/kmefL0tr/1/

Answer 1

Highcharts默认情况下不支持此行为，但是在afterDrawDataLabels事件中，通过使用css方法，可以设置textOverflow: 'ellipsis'和正确的width样式：

var H = Highcharts;

H.addEvent(H.Series, 'afterDrawDataLabels', function() {
    var movement;

    this.points.forEach(function(p) {
        if (p.shapeArgs.width < p.dataLabels[0].width) {
            movement = (p.dataLabels[0].width - p.shapeArgs.width) / 2;

            p.dataLabels[0].css({
                width: p.shapeArgs.width,
                textOverflow: 'ellipsis'
            });
            p.dataLabels[0].text.attr({
                x: movement
            });
        }
    });
});

实时演示：https://jsfiddle.net/BlackLabel/h3fwxjb7/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

Highcharts x范围系列。如何裁剪数据内部的标签？

1 个答案: