Question

我想创建一个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'
        },
    }
}]
});

谢谢

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/

高图表xrange标签只能在适合框的情况下显示吗？

1 个答案: