简体   繁体   English

如何在谷歌图表中绘制垂直轴

[英]How to draw vertical axis in google charts

I am using gooogle charts. 我正在使用gooogle图表。 When I include constant values in the third & fourth column in my chart it shows me as horizontal lines. 当我在图表的第三和第四列中包含常数值时,它将显示为水平线。 Please suggest how to draw it as vertical lines as shown in the image belows 请建议如何将其绘制为垂直线,如下图所示

在此处输入图片说明

在此处输入图片说明

I found this, Hereby a complete working fiddle to show you how it can be done: http://jsfiddle.net/NC37X/1345/ 我发现了这一点,特此通过一个完整的工作小提琴向您展示了如何完成: http : //jsfiddle.net/NC37X/1345/

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    data.addRow(["A", null, null, 1, 1, ]);
    data.addRow(["B", null, null, 2, 0.5]);
    data.addRow(["C", null, null, 4, 1]);
    data.addRow(["D", null, null, 8, 0.5]);
    data.addRow(["E", null, null, 7, 1]);
    data.addRow(["F", null, null, 7, 0.5]);
    data.addRow(["G", 'Foo', 'Foo annotation', 8, 1]);
    data.addRow(["H", null, null, 4, 0.5]);
    data.addRow(["I", null, null, 2, 1]);
    data.addRow(["J", null, null, 3.5, 0.5]);
    data.addRow(["K", 'Bar', 'Bar annotation', 3, 1]);
    data.addRow(["L", null, null, 3.5, 0.5]);
    data.addRow(["M", null, null, 1, 1]);
    data.addRow(["N", null, null, 1, 0.5]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        curveType: 'function',
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line'
        }
    });
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM