可视化组合图双轴图

时间:2015-04-01 05:59:34

标签: charts google-visualization

我正在编写一份报告,我需要用双轴填充图表,有人可以帮助我找出我如何推动这一点,这是我需要的示例图表。 enter image description here

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

感谢。

1 个答案:

答案 0 :(得分:3)

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



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>
&#13;
&#13;
&#13;