可视化组合图双轴图 [英] Visualization Combo Chart dual axis chart

问题描述

我在工作一个报告，我需要填充一个图形的双轴，有人可以帮助我找到如何可以impelment，这里是我需要的示例图表。

i我尝试使用 https://developers.google.com/chart/interactive/ docs / gallery / combochart ，但是查看这个对我来说不起作用。

谢谢。

解决方案

这应该让你开始...

  google.load（visualization，1，{packages：[corechart]}）; google.setOnLoadCallback（drawChart）; function drawChart（）{var data = google.visualization.arrayToDataTable（[ 周结束，实际FT，推荐FTE，其他票，路由器票]，[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}， {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 / javascriptsrc =https://www.google.com/jsapi>< / script>< div id =chartstyle =width：900px; height：300px; >< / div>  

im working on a report, where i need to populate a graph with dual axis, can someone help me out to find how can i impelment that, here is the sample chart that i need.

i im trying to use https://developers.google.com/chart/interactive/docs/gallery/combochart but looking this will not work for me.

Thanks.

解决方案

This should get you started...

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>

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