创建叠加折线图

问题描述 投票:0回答:0

我正在尝试为不同日期的学生成绩创建比较折线图。 我想在一行中显示日期和标记,例如 2021 年,以及 2022 年不同日期的日期和标记。 我尝试了以下方法,但结果一直在创建彼此相邻的线条,而不是彼此重叠。附上结果,然后是第二张图片,我用油漆创建了一张图片,我想完成的是什么 example

<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>
arrays google-apps-script charts chart.js linechart
© www.soinside.com 2019 - 2024. All rights reserved.