Question

我在Highcharts中创建了一个气泡图，如下所示：

正如您所见，数据“0”和数据“7”的“气泡”被切断。

无论如何都要在顶部和底部添加填充以考虑到这一点吗？

我知道将轴范围扩展到-1 - > 8将对此进行排序，但我宁愿不这样做

以下是代码：

$(function () {

    var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' },
                { x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' },
                { x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' },
                { x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' },
                { x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' },
                { x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' },
                { x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' },
                { x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];         

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
            credits: false,

        legend: {
            enabled: false
        },

        title: {
            text: ''
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: ''
            },
           categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8']
        },

        yAxis: {
            startOnTick: true,
            min: 0,
            max: 7,
            title: {
                text: 'Score'
            },
            labels: {
                format: '{value}'
            },
            maxPadding: 0.2
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' +
                '<tr><th>Score:</th><td>{point.y}</td></tr>' +
                '<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>',
            footerFormat: '</table>',
            followPointer: true
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{ data: data }]
    });
});

Answer 1

我在Google搜索中找到了答案：http://www.java2s.com/Tutorials/highcharts/Example/Axis_Label/Hide_axis_first_label.htm。

此代码示例显示了您可以在showFirstLabel或showLastLabel中使用的名为xAxis和yAxis的属性。这些应该通过增加yAxis（到-1到8）的范围来增加气泡的额外空间来实现你想要的效果，但不要像你在问题中所要求的那样显示那些额外的标签。

以下是我在图表选项中应用它们的地方......

    yAxis: {
        startOnTick: true,
        min: -1,
        max: 8,
        showFirstLabel: false,
        showLastLabel: false,
        title: {
            text: 'Score'
        },
        labels: {
            format: '{value}'
        },
        maxPadding: 0.2
    },

......结果如下：

您可以在此处查看小提琴的更新版本：http://jsfiddle.net/brightmatrix/svcuLgso/7/

我希望这有帮助！

Answer 2

处理此问题的两种替代方法：

1）将startOnTick和endOnTick设置为false。如果需要，调整minPadding / maxPadding。

yAxis: {
  startOnTick: false,
  endOnTick: false,
  minPadding: 0.025,
  maxPadding: 0.025
}

输出

小提琴：

http://jsfiddle.net/jlbriggs/svcuLgso/8/

2）只是不要设置min或max，让图表完成它的工作。

    yAxis: { }

小提琴：

http://jsfiddle.net/jlbriggs/svcuLgso/9/

Highcharts - Bubblechart - 在图的顶部和底部添加填充

2 个答案: