Question

正在尝试根据测试套件运行生成的xml文件创建测试报告。我必须为xml中的应用程序节点中的每个活动生成google折线图。它是动态的，我们不知道应用程序标记下将进行多少活动。

到目前为止，我尝试在for循环中使用回调方法生成折线图，但是所有图形都具有相同的数据。当我调试代码时，我发现用于创建数据表的回调方法中的代码始终针对上一个活动执行，并为每个活动生成相同的图表。

这是我尝试过的代码 html

<div id="container">
    <div id="report" class="table-responsive">
        <select id="app" name="app" aria-placeholder="Select Application">
            <option>-- Select Application --</option>
        </select>
        <select id="activity" name="activity" aria-placeholder="Select Activity">
            <option>-- Select Activity --</option>
        </select>
        <select id="type" name="type" aria-placeholder="Select StartupType">
            <option value="coldstart" >Cold</option>
            <option value="warmstart" selected>Warm</option>
        </select>
        <br/>
        <div id="chartContainer">

        </div>
    </div>
    <div align="center" class="loader">
        <img src="images/loader.gif" id="load" width="400" height="400" align="absmiddle" />
    </div>
</div>

javascript

var appXml;
var summaryXml;
$(document).ready(function () {
    prepareCharts();

    $("#app").change(function () {
        var app = $(this).val();
        if (app != "") {
            $(appXml).find('package').each(function () {
                if ($(this).attr('appname') == app) {
                    var options = '<option value="">-- Select activity --</option>';
                    $(this).find('activity').each(function () {
                        options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
                    });
                    $('#activity').html(options);
                }
            });
        }
    });

    $("#activity").change(function () {
        if ($(this).val() != "")
            drawActivityChart();
        else
            drawActivityCharts(appXml, $('#type').val());
    });

    $('#type').change(function () {
        var type = $(this).val();
        if ($('#activity').val() == "")
            drawActivityCharts(appXml, type);
        else
            drawActivityChart();
    });
});

function prepareCharts() {
    $.ajax({
        type: "GET",
        url: "Startuptime.xml",
        dataType: "xml",
        success: drawCharts
    });
}

function drawCharts(xml) {
    console.log('drawing charts');
    appXml = xml;
    prepareDropdowns(xml);
    drawActivityCharts(xml);
}

function prepareDropdowns(xml) {
    var options = '<option value="">-- Select application --</option>';
    $(xml).find('package').each(function () {
        options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
    });

    $('#app').html(options);
    $('#app option:nth-child(2)').attr('selected', 'selected').change();
}

function drawActivityCharts(xml, type) {
    $('#chartContainer').children().remove();
    if (typeof type === 'undefined')
        type = 'warmstart';
    google.charts.load('current', { 'packages': ['corechart'] });
    var app = $('#app').val();
    $(xml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            var i = 1;
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                console.log(i);
                console.log(activityName);
                i++;
                if ($(this).find(type).length > 0) {
                    that = this;
                    $('#chartContainer').append('<div id="' + activityName + '"></div>')
                    google.charts.setOnLoadCallback(function () {
                        var data = new google.visualization.DataTable();
                        data.addColumn('number', 'Occurance');
                        data.addColumn('number', 'Time');
                        var row = 1;
                        $(that).children(type).find('displaytime').each(function () {
                            data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                            console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                            row++;
                        });
                        // Set chart options
                        var options = {
                            'title': activityName,
                            'width': 800,
                            'height': 200
                        };
                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.visualization.LineChart(document.getElementById(activityName));
                        chart.draw(data, options);
                    });
                }
            });
        }
    });
}

function drawActivityChart() {
    $('#chartContainer').children().remove();
    google.charts.load('current', { 'packages': ['corechart'] });
    var app = $('#app').val();
    var activity = $('#activity').val();
    var type = $('#type').val();

    $(appXml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                if (activityName == activity) {
                    if ($(this).find(type).length > 0) {
                        that = this;
                        $('#chartContainer').append('<div id="' + activityName + '"></div>')
                        google.charts.setOnLoadCallback(function () {
                            var data = new google.visualization.DataTable();
                            data.addColumn('number', 'Occurance');
                            data.addColumn('number', 'Time');
                            var row = 1;
                            $(that).find('displaytime').each(function () {
                                data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                                console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                                row++;
                            });
                            // Set chart options
                            var options = {
                                'title': activityName,
                                'width': 800,
                                'height': 200
                            };
                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.LineChart(document.getElementById(activityName));
                            chart.draw(data, options);
                        });
                    }
                }
            });
        }
    });
}

drawActivityCharts（）是必须绘制活动图表的方法和xml模式将如下所示。

    <?xml version='1.0' encoding='UTF-8' ?>
<appstartuptime>
    <package appname="appname" name="packagename" packageversion="version">
        <activity activityname="activityname">
            <coldstart numberoftimes="1">
                <displaytime>
                    <timetoinitialdisplay>841</timetoinitialdisplay>
                </displaytime>
            </coldstart>
        </activity>
        <activity activityname="activityname">
                <warmstart numberoftimes="2">
                <displaytime>
                    <timetoinitialdisplay>454</timetoinitialdisplay>
                </displaytime>
                <displaytime>
                    <timetoinitialdisplay>467</timetoinitialdisplay>
                </displaytime>
            </warmstart>
        </activity>
    </package>
</appstartuptime>

Answer 1

每个页面加载时，google.charts.load和google.charts.setOnLoadCallback都只需调用一次。

此外，google.charts.load将默认等待页面加载，
因此，它可以代替$(document).ready

使用

您还可以在callback语句中包含Google的load。

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

或使用它返回的承诺。

google.charts.load('current', {
  packages:['corechart']
}).then(drawChart);

鉴于此，建议先加载google，
然后您可以根据需要绘制任意数量的图表。

我并没有遍历所有代码，但是类似于以下内容的代码应该可以工作...

var appXml;
var summaryXml;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
    prepareCharts();

    $("#app").change(function () {
        var app = $(this).val();
        if (app != "") {
            $(appXml).find('package').each(function () {
                if ($(this).attr('appname') == app) {
                    var options = '<option value="">-- Select activity --</option>';
                    $(this).find('activity').each(function () {
                        options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
                    });
                    $('#activity').html(options);
                }
            });
        }
    });

    $("#activity").change(function () {
        if ($(this).val() != "")
            drawActivityChart();
        else
            drawActivityCharts(appXml, $('#type').val());
    });

    $('#type').change(function () {
        var type = $(this).val();
        if ($('#activity').val() == "")
            drawActivityCharts(appXml, type);
        else
            drawActivityChart();
    });
});

function prepareCharts() {
    $.ajax({
        type: "GET",
        url: "Startuptime.xml",
        dataType: "xml",
        success: drawCharts
    });
}

function drawCharts(xml) {
    console.log('drawing charts');
    appXml = xml;
    prepareDropdowns(xml);
    drawActivityCharts(xml);
}

function prepareDropdowns(xml) {
    var options = '<option value="">-- Select application --</option>';
    $(xml).find('package').each(function () {
        options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
    });

    $('#app').html(options);
    $('#app option:nth-child(2)').attr('selected', 'selected').change();
}

function drawActivityCharts(xml, type) {
    $('#chartContainer').children().remove();
    if (typeof type === 'undefined')
        type = 'warmstart';
    var app = $('#app').val();
    $(xml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            var i = 1;
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                console.log(i);
                console.log(activityName);
                i++;
                if ($(this).find(type).length > 0) {
                    that = this;
                    $('#chartContainer').append('<div id="' + activityName + '"></div>')

                    var data = new google.visualization.DataTable();
                    data.addColumn('number', 'Occurance');
                    data.addColumn('number', 'Time');
                    var row = 1;
                    $(that).children(type).find('displaytime').each(function () {
                        data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                        console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                        row++;
                    });
                    // Set chart options
                    var options = {
                        'title': activityName,
                        'width': 800,
                        'height': 200
                    };
                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.LineChart(document.getElementById(activityName));
                    chart.draw(data, options);
                }
            });
        }
    });
}

function drawActivityChart() {
    $('#chartContainer').children().remove();
    var app = $('#app').val();
    var activity = $('#activity').val();
    var type = $('#type').val();

    $(appXml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                if (activityName == activity) {
                    if ($(this).find(type).length > 0) {
                        that = this;
                        $('#chartContainer').append('<div id="' + activityName + '"></div>')

                        var data = new google.visualization.DataTable();
                        data.addColumn('number', 'Occurance');
                        data.addColumn('number', 'Time');
                        var row = 1;
                        $(that).find('displaytime').each(function () {
                            data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                            console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                            row++;
                        });
                        // Set chart options
                        var options = {
                            'title': activityName,
                            'width': 800,
                            'height': 200
                        };
                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.visualization.LineChart(document.getElementById(activityName));
                        chart.draw(data, options);
                    }
                }
            });
        }
    });
}

在页面中添加多个（动态数字）Google图表

1 个答案: