使用JQuery

Question

我要生成几个图表，第一页应该有标题和前8个图表，如何在第8个图表之后分页并转到没有标题的第二个页面。每个学生都有一个包含多个科目和分数的数据记录，因此每个报告都有几个每个科目的图表。

    var counter = 1;
    $.get('/rest/report/' + id, function (data) {
        data.subjects.forEach(function (subject, idx) {
            console.log(idx);
            var container = $('<div class="one-chart"></div>')[0];
            if (counter < 8) {
                $('.charts-container').last().append(container);
                renderOneChart(container, subject.name, subject.scores);
                counter++;
            }

        });

    });
    $('body').append('<div class="page" ></div>');

});

Answer 1

我认为您可以定位每个第八个图表，然后使用page-break-after: always来确保分页。

例如，如果每个图表都有.chart类，您可以执行以下操作：

.chart:nth-child(8n) {
    page-break-after: always;
}

这是JSFiddle。