可视化组合图双轴图答案

【问题标题】：Visualization Combo Chart dual axis chart可视化组合图双轴图
【发布时间】：2015-04-01 05:59:33
【问题描述】：

我正在编写一份报告，我需要用双轴填充一个图表，有人可以帮我找出如何实现它，这是我需要的示例图表。

我正在尝试使用https://developers.google.com/chart/interactive/docs/gallery/combochart，但看起来这对我不起作用。

谢谢。

【问题讨论】：

【解决方案1】：

这应该让你开始......

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["Week Ending","Actual FT", "Recommended FTE", "Other Tickets", "Router Tickets"],
        ["7/1", 1800, 1900, 19, 22],
        ["7/8", 1800, 1900, 20, 23],
        ["7/15", 1800, 1900, 20, 23],
        ["7/22", 1800, 1900, 19, 22],
        // ..
        ["9/29", 1800, 1900, 29, 30]
    ]);


    var options2 = {
        vAxes: [{
            minValue: 1200,
            maxValue: 2500
        }, {
            minValue: 17,
            maxValue: 30
        }],
        
        curveType: 'function',
        
        hAxis: {
            title: "week ending"
        },


        series: {
            0: {
                type: "bars",
                targetAxisIndex: 0,
                color: "blue"
            },
            1: {
                type: "bars",
                targetAxisIndex: 0,
                color: "green"
            },
            2: {
                type: "line",
                targetAxisIndex: 1,
                color: "red"
            },
            3: {
                type: "line",
                targetAxisIndex: 1,
                color: "cyan"
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(data, options2);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

【讨论】：