如何在单线图上画两个图形

How to draw two graphs on a single line chart?

本文关键字：两个 图形 单线图      更新时间：2023-09-26

我目前使用这个代码(谷歌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值。如果有人能帮我，我会很感激的。

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

相关文章：