如何在单个折线图上绘制两个图形？答案

【问题标题】：How to draw two graphs on a single line chart?如何在单个折线图上绘制两个图形？
【发布时间】：2015-08-03 18:41:10
【问题描述】：

我目前正在使用此代码（Google Api 显示视觉数据，来源：https://developers.google.com/chart/interactive/docs/gallery/linechart）来绘制所有 y 轴点映射到单个 x 轴值的图形：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.1', {packages: ['line']});
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Day');
            data.addColumn('number', 'Guardians of the Galaxy');
            data.addColumn('number', 'The Avengers');
            data.addColumn('number', 'Transformers: Age of Extinction');

            data.addRows([
                [new Date(2015,1,2),  37.8, 80.8, 41.8],
                [new Date(2015,1,3),  30.9, 69.5, 32.4],
                [new Date(2015,1,4),  25.4,   57, 25.7],
                [new Date(2015,1,5),  11.7, 18.8, 10.5],
                [new Date(2015,1,6),  11.9, 17.6, 10.4],
                [new Date(2015,1,7),   8.8, 13.6,  7.7],
                [new Date(2015,1,8),   7.6, 12.3,  9.6],
                [new Date(2015,1,9),  12.3, 29.2, 10.6],
                [new Date(2015,1,10),  16.9, 42.9, 14.8],
                [new Date(2015,1,11), 12.8, 30.9, 11.6],
                [new Date(2015,1,12),  5.3,  7.9,  4.7],
                [new Date(2015,1,13),  6.6,  8.4,  5.2],
                [new Date(2015,1,14),  4.8,  6.3,  3.6],
                [new Date(2015,1,15),  4.2,  6.2,  3.4]
            ]);

            var options = {
                chart: {
                    title: 'Box Office Earnings in First Two Weeks of Opening',
                    subtitle: 'in millions of dollars (USD)'
                },
                width: 900,
                height: 500,
                axes: {
                    x: {
                        0: {side: 'top'}
                    }
                }
            };

            var chart = new google.charts.Line(document.getElementById('line_top_x'));

            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <div id="line_top_x"></div>
</body>
</html>

我的 javascript 不太流利，我想弄清楚如何在同一折线图上绘制另一组数据，这些数据的 y 值映射到 不同的 x 值。如果有人可以帮帮我。

【问题讨论】：

标签： javascript google-api linechart

【解决方案1】：

我认为您正在寻找额外的图表选项，特别是双 y 或 https://developers.google.com/chart/interactive/docs/gallery/linechart#dual-y-charts.

【讨论】：