高图表气泡用最大 x/y轴切断

Question

我需要有一个气泡图，其中xAxis和yAxis从0到5。如果我在 xAxis 或 yAxis 5 上有一个气泡，气泡就会被切掉。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            zoomType: 'xy',
            height: 500,
            width: 500,
        },
        title: {
            text: 'Highcharts Bubbles'
        },
        yAxis: {
            min: 0, 
            max: 5,
            gridLineWidth: 1,
        },
        xAxis: {
            min: 0, 
            max: 5,
            gridLineWidth: 1,
        },
        series: [{
            data: [[5, 4, 2], [3, 1, 1], [4, 2, 3], [1, 2, 3], [1, 4, 1], [2, 5, 1], [5, 2, 3], [3, 2, 1]]
        }]
    });
});

http://jsfiddle.net/tum3zzzu/1/

我不知何故找到了做 max： 5.5 的技巧，但它仅适用于 xAxis。在 yAxis 最大值上：5.5 四舍五入为 6。

如何解决这个问题？

Answer 1

您可以使用tickPositioner准确地告诉图表什么显示为即时报价。我还使用 showLastLabel: false 来隐藏最后一个刻度（即 5.5）。以下是您可以在代码中执行的操作：

yAxis: {
    min: 0, 
    max: 5.5,
    endOnTick: true,
    showLastLabel: false,        // to hide 5.5
    gridLineWidth: 1,
    tickPositioner: function() {
        var positions = [0],     // to start from 0
            tick = Math.floor(this.dataMin),
            increment = Math.ceil((this.dataMax - this.dataMin) / 6);
        for (tick; tick - increment < this.dataMax; tick += increment) {
            positions.push(tick);
        }
        positions.push(this.dataMax + 0.5); // to add the last label 5.5
        return positions;
    }
}

这是演示。