Highcharts

Question

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

如您所见，数据“0”和数据“7”的 'bubbles' 被截断了。

是否可以在顶部和底部添加填充以考虑到这一点？

我知道将轴范围扩展到 -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）为气泡添加额外的 space 来完成你想要的，但不显示那些额外的标签，正如你在问题中所要求的那样.

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

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

...结果如下：

您可以在此处查看 fiddle 的更新版本：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
}

输出：

Fiddle:

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

2) 只是不要设置 min 或 max，让图表照它做的去做。

    yAxis: { }

Fiddle:

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

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

Highcharts - Bubblechart - adding padding to top and bottom of plot

javascript

bubble-chart

data-visualization