0

我想创建一个 Highcharts xrange 图表，其中仅显示适合框/范围的数据标签。这可能吗？

目前，标签不会重叠，但在不适合时会显示在框外。

我尝试使用 xrange.dataLabels 选项，例如“allowOverlap”、“clip”、“inside”或“padding”，但它们似乎不是为了执行此/工作而创建的。

示例如下所示：http: //jsfiddle.net/mdomnita/dfLw7j1c/1/

Highcharts.chart('container', {
chart: {
    type: 'xrange'
},
title: {
    text: 'Highcharts X-range'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    title: {
        text: ''
    },
    categories: ['Idea','Prototyping'],
    reversed: true
},
series: [{
    name: 'Project 1',
    data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0
    }, {
        x: Date.UTC(2014, 11, 10),
        x2: Date.UTC(2014, 11, 11),
        y: 1
    }, {
        x: Date.UTC(2014, 11, 11),
        x2: Date.UTC(2014, 11, 12),
        y: 1
    }],
    dataLabels: {
        enabled: true,
        formatter: function () {
          return 'This is a label that should only be shown if it fits the box'
        },
    }
}]
});

谢谢，

4

1 回答 1

1

您可以通过以下方式轻松实现所需的行为，例如在render事件中：

    events: {
        render: function() {
            var points = this.series[0].points;

            Highcharts.each(points, function(point) {
                var label = point.dataLabel;

                if (point.shapeArgs.width < label.width) {
                    if (label.visibility !== 'hidden') {
                        label.hide();
                    }
                } else {
                    if (label.visibility === 'hidden') {
                        label.show();
                    }
                }
            });
        }
    }

现场演示：http: //jsfiddle.net/BlackLabel/k4swecd6/

于 2018-09-26T13:54:37.810 回答