Google图表选项可隐藏y标签和注释

时间:2014-10-30 17:22:52

标签: javascript google-visualization

从这个JSFiddle开始,您会注意到每个系列都有一组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));
};

1 个答案:

答案 0 :(得分:0)

对于轴的操作,您需要使用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
    }