时间戳

首页 > 解决方案 > 谷歌气泡图中的气泡被切断

angularjs - 谷歌气泡图中的气泡被切断

问题描述

我正在使用谷歌气泡图，顶线上的气泡被切断了。x 和 y 轴都是自定义标签

这是我的JSFiddle 示例

这是图表选项：

    var options = {
        sizeAxis: {
            maxSize: 7,
            minSize: 1
        },
        fontSize:10,
        legend: 'none',
        height: 200,
        width: 400,
        bubble: { stroke: '#5dadff', opacity: 1 },
        colors: ['#5dadff', '#5dadff'],
        tooltip: {
            trigger: 'none'
        },
        hAxis: {
            ticks: [
                { v: 800, f: '800m\n4f' },
                { v: 1200, f: '1200m\n6f' },
                { v: 1600, f: '1600m\n8f' },
                { v: 2000, f: '2000m\n10f' },
                { v: 2400, f: '2400m\n12f' },
                { v: 2800, f: '2800m+\n14f+' }
            ],
            gridlines: { color: '#dedede' },
            minorGridlines: { color: '#f7f7f7', count: 3 },
            textStyle: { color: '#5f5f5f' }

        },
        vAxis: {
            ticks: [
                { v: 1, f: '' },
                { v: 2, f: '2YO' },
                { v: 3, f: '3YO' },
                { v: 4, f: 'OPEN' }

            ],
            gridlines: { color: '#dedede' },
            textStyle: { color: '#5f5f5f' }
        }
    };

标签： angularjschartsgoogle-visualization

解决方案

添加另一个空白 y 轴刻度，以留出更多空间... 

        vAxis: {
            ticks: [
                { v: 1, f: '' },
                { v: 2, f: '2YO' },
                { v: 3, f: '3YO' },
                { v: 4, f: 'OPEN' },
                { v: 5, f: '' }  // <-- add tick

            ],
            gridlines: { color: '#dedede' },
            textStyle: { color: '#5f5f5f' }
        }

见分叉小提琴-> https://jsfiddle.net/dpLa4r6j/

推荐阅读