创建叠加折线图：解决Google Charts双年份折线不重叠问题

想要创建一张对比折线图，用折线分别展示2021年和2022年的日期与成绩数据，但使用Google Charts编写代码后，折线始终并列显示而非重叠（预期效果为两条折线在对应月份位置重叠对比）。以下是编写的代码：

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', '2021 Marks');
        data.addColumn('number', '2022 Marks');
        data.addRows([
            [new Date('2021-01-01'), 100, null],
            [new Date('2021-02-15'), 150, null],
            [new Date('2021-03-11'), 200, null],
            [new Date('2021-04-20'), 175, null],
            [new Date('2021-05-01'), 250, null],
            [new Date('2022-01-26'), null, 150],
            [new Date('2022-02-02'), null, 175],
            [new Date('2022-03-15'), null, 225],
            [new Date('2022-04-21'), null, 200],
            [new Date('2022-05-16'), null, 275]
        ]);

        var options = {
            title: 'Comparison Line Graph',
            hAxis: {
                title: 'Months',
                format: 'MMM'
            },
            vAxis: {
                title: 'Mark',
                viewWindow: {
                    min: 0,
                    max: 300
                }
            },
            series: {
                0: {
                    pointSize: 10,
                    label: '2021 Mark',
                    lineDashStyle: [2, 2],
                    targetAxisIndex: 0
                },
                1: {
                    pointSize: 10,
                    label: '2022 Mark',
                    lineDashStyle: [5, 5],
                    targetAxisIndex: 0
                }
            },
            legend: {
                position: 'top'
            }
        };

        
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
       
        options.series[0].targetAxisIndex = 0;
        options.series[1].targetAxisIndex = 0;
        chart.draw(data, options);
    }
</script>

问题原因与解决方法 #

原因 #

当前代码中，2021和2022年的日期是完整的跨年度日期，Google Charts的日期轴会严格按照时间顺序渲染数据点，因此2021年的数据点全部排列在轴的左侧，2022年的数据点排列在右侧，导致两条折线并列而非重叠。

解决方法 #

将两年的日期统一为同一年份（比如都使用2021年），只保留月、日信息，这样同一月份的数据点会落在x轴的同一位置，实现折线重叠对比。同时通过hAxis.format配置只显示月份标签，隐藏年份，避免视觉混淆。

修改后的代码如下：

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', '2021 Marks');
        data.addColumn('number', '2022 Marks');
        data.addRows([
            [new Date('2021-01-01'), 100, null],
            [new Date('2021-02-15'), 150, null],
            [new Date('2021-03-11'), 200, null],
            [new Date('2021-04-20'), 175, null],
            [new Date('2021-05-01'), 250, null],
            // 将2022年的日期年份改为2021，保留月日
            [new Date('2021-01-26'), null, 150],
            [new Date('2021-02-02'), null, 175],
            [new Date('2021-03-15'), null, 225],
            [new Date('2021-04-21'), null, 200],
            [new Date('2021-05-16'), null, 275]
        ]);

        var options = {
            title: 'Comparison Line Graph',
            hAxis: {
                title: 'Months',
                format: 'MMM' // 仅显示月份缩写
            },
            vAxis: {
                title: 'Mark',
                viewWindow: {
                    min: 0,
                    max: 300
                }
            },
            series: {
                0: {
                    pointSize: 10,
                    label: '2021 Mark',
                    lineDashStyle: [2, 2],
                    targetAxisIndex: 0
                },
                1: {
                    pointSize: 10,
                    label: '2022 Mark',
                    lineDashStyle: [5, 5],
                    targetAxisIndex: 0
                }
            },
            legend: {
                position: 'top'
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

补充说明 #

如果需要保留原始年份的业务逻辑，也可以通过DataView转换数据，或者自定义x轴的刻度标签，但统一年份的方法是最直接且符合预期效果的方案。

内容的提问来源于stack exchange，提问作者André Esterhuizen