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 max：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;
    }
}

这是DEMO。

使用max x / yAxis

1 个答案: