Google Charts API - 包含两个yAxis的图表 - 与Google表格中的一个相同

时间:2013-12-18 08:35:11

标签: charts

我做了一项非常大的研究,我无法相信使用当前版本的Google Charts API,我无法使用Google表格中的图表 - https://support.google.com/drive/answer/2451203?hl=en < strong> 2 yAxis具有独立的值和一个常见的xAxis。

*更新:到目前为止,我设法做了一个酒吧&amp;折线图。我需要完全相同的东西,但现在左边的vAxis的值为1到5.我需要右边的额外vAxis,其值为0到2 (目前,还有一个额外的xAxis用于“STD” “,但它的值不是0到2,而是1到5)

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Cups', 'STD'],
        ['2.2',  4.1,      1.5],
        ['2.3',  2.1,      1],
        ['2.4',  3,      1.4],
        ['2.6',  2,      1.2],
        ['2.7',  2,      1.3],
        ['2.1',  1.1,      1.7]
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      hAxis: {title: "Month"},
      vAxis: {
        title: "Cups",
        gridlines: {
            count: 5
        },
        baseline: 1,
        format: "#"
    },
      seriesType: "bars",
      series: {1: {type: "line"}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    chart.draw(data, options);
}

1 个答案:

答案 0 :(得分:0)

问题解决了!

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

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'AVRG', 'STD'],
        ['Item 1',  4.1,      1.5],
        ['Item 2',  2.1,      1.1],
        ['Item 3',  3,      0.7],
        ['Item 4',  2,      1.5],
        ['Item 5',  2,      1.7],
        ['Item 6',  1.1,      0.3]
    ]);

    var options = {
    title : 'Title',
    hAxis: {title: "Month"},
    vAxes:[
        {
            title: "AVRG",
            gridlines: {
                count: 5
            },
            baseline: 1,
            format: "#"
        },
        {
            title: "STD",
            gridlines: {
                count: 2
            },
            baseline: 0,
            format: "#"
        }
    ],
    series:[
        {targetAxisIndex:0},
        {targetAxisIndex:1, type: "line"}
    ],
    seriesType: "bars"
    };

    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    chart.draw(data, options);
}