创建多个y轴组合图 [英] Creating a multiple y-axis combo chart

问题描述

我正在进一步改进我在这里创建的组合图，使它首先是一个双y轴组合图，然后是多轴组合图。

I'm looking at further improving a combo chart I created here by making it first a dual y axis combo chart then a multiple axis combo chart.

As seen here I've figured out how to create a basic combo chart using the tutorial.

google.load("visualization", "1", {
    packages: [ "corechart", "bar" ]
});

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        [ 'Month', 'Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6' ],
        [ 'Set 1', 165, 938, 522, 998, 450, 614.6 ],
        [ 'Set 2', 135, 1120, 599, 1268, 288, 682 ],
        [ 'Set 3', 157, 1167, 587, 807, 397, 623 ],
        [ 'Set 4', 139, 1110, 615, 968, 215, 609.4 ],
        [ 'Set 5', 136, 691, 629, 1026, 366, 569.6 ]
    ]);

    var options = {
        title: 'Chart title',
        width: 1001,
        height: 500,
        vAxis: {
            title: "VAxis title"
        },
        hAxis: {
            title: "HAxis title"
        },
        seriesType: "bars",
        series: {
            5: {
                type: "line"
            }
        }
    };

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

.chartwrapper {
    margin: 20px 0 12px 0;
}
#number_format_chart {
    width: 100%
}

<script src="https://www.google.com/jsapi"></script>
<div class="chartwrapper">
    <!--Div that will hold the bar charts -->
    <div id="number_format_chart"></div>
</div>

Now moving on to changing the plain combo chart to a dual y version this is what I'm trying to achieve.

I thought adding the code below would help but no luck as the 2nd y axis isn't displayed

series: {
    0: { axis: 'Col1' }, // Bind series 0 to an axis named 'distance'.
    1: { axis: 'Col2' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
    y: {
        Col1: {
            label: 'leftyaxis'
        }, // Left y-axis.
        Col2: {
            side: 'right',
            label: 'rightyaxis'
        } // Right y-axis.
    }
}

Any help is appreciated

解决方案

You're close. The way I've done it uses indexes so the axes part looks like this

    vAxes: {
            0: {
                title: 'leftyaxis'
            },
            1: {
                title: 'rightyaxis'
            }
        }  

And you add something like targetAxisIndex: 0 to your series.

Fiddle

这篇关于创建多个y轴组合图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！