highcharts xrange 标签只有在适合盒子的情况下才能显示吗？

Question

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

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

我尝试使用 xrange.dataLabels 选项，例如 'allowOverlap'、'clip、'inside' 或 'padding'，但它们似乎并不是为了 this/work.

此处显示示例：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'
        },
    }
}]
});

谢谢，

Answer 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/

highcharts xrange 标签只有在适合盒子的情况下才能显示吗？

Can highcharts xrange labels be shown only if they fit the box?

javascript

charts

xrange

highcharts