谷歌图表选项隐藏y标签和注释

Google chart options to hide y-labels and annotate

本文关键字:标签 注释 隐藏 选项 谷歌      更新时间:2023-09-26

从这个JSFiddle开始,您会注意到每个系列都有一组y标签,这是这种类型的绘图所需要的,但是,我不想要它们,或者至少只想要其中一个。如何隐藏右侧的y标签,或者至少隐藏所有y标签?

此外,是否有一种简单的方法可以将数据值显示为每个小节的注释?

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
    var data = google.visualization.arrayToDataTable([
        ['X-Title', 'Blue 1', 'Blue 2', 'Red 1', 'Red 2', 'Yellow 1', 'Yellow 2'],
        ['2001', 321, 621, 816, 319, 125, 175],
        ['2002', 163, 231, 539, 594, 225, 300],
        ['2003', 125, 819, 123, 578, 100, 200],
        ['2004', 197, 536, 613, 298, 25, 150]
    ]);
    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year comparison',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1200
            }
        },
        series: {
            0: {
                targetAxisIndex: 0
            },
            1: {
                targetAxisIndex: 0
            },
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            },
            4: {
                targetAxisIndex: 2
            },
            5: {
                targetAxisIndex: 2
            }
        }
    };
    // Instantiate and draw our chart, passing in some options.
    var chart_div = document.getElementById('chart_div');
    var chart = new google.charts.Bar(chart_div);    
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

对于轴的操作,您需要使用vAxes选项:

    vAxes:{
        1:{textStyle:{color:'none'}}, // this will hide the first on the right
        2:{textStyle:{color:'none'}}, // this will hide the second on the right
    }