Question

我目前正在使用此代码（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值。我将不胜感激有人可以帮帮我。

Answer 1

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

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

1 个答案: