谷歌可视化图表未显示其中一个图例文本

时间:2016-08-23 11:21:08

标签: google-visualization

谷歌图表未显示其中一个图例文字,但数据已填充。我已将列名称作为"错误"对于未显示的图例。它对这种行为有什么影响吗?

function drawTrendChart() {
                var trendValues = trendTableChart.getDataTable();
                if (trendValues.getNumberOfRows() <= 0) {
                    document.getElementById('trendTableChart').style.display = 'none';
                    document.getElementById('trendChart').style.display = 'none';
                    return;
                }
                var noOfRows = parseInt(trendValues.getNumberOfRows());
                var trendValuesChart = new google.visualization.Table(document.getElementById('trendValuesChart'));
                trendValuesChart.draw(trendValues);
                noOfRows = trendValues.getNumberOfRows();
                var trendTable = new google.visualization.DataTable();
                trendTable.addColumn('string', 'Execution Date');
                trendTable.addColumn('number', 'PASSED');
                trendTable.addColumn({ type: 'string', role: 'annotation' });
                trendTable.addColumn({ type: 'string', role: 'tooltip' });
                trendTable.addColumn('number', 'FAILED');
                trendTable.addColumn({ type: 'string', role: 'annotation' });
                trendTable.addColumn({ type: 'string', role: 'tooltip' });
                trendTable.addColumn('number', 'ERRORS');
                trendTable.addColumn({ type: 'string', role: 'annotation' });
                trendTable.addColumn({ type: 'string', role: 'tooltip' });
                trendTable.addColumn('number', 'SKIPPED');
                trendTable.addColumn({ type: 'string', role: 'annotation' });
                trendTable.addColumn({ type: 'string', role: 'tooltip' });
                /* - New Code for Team in tooltip*/
                trendTable.addColumn('number', 'Team');
                trendTable.addColumn({ type: 'string', role: 'tooltip' });
                /* ends here*/
                trendChart.getOptions().series = {
                    0: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
                    1: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
                    2: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
                    3: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
                    4: { 'type': 'bars', 'targetAxisIndex': 0, 'visibleInLegend': false }
                };
                trendChart.getOptions().colors = ["#53A14B", "#F09885", "#900C3F","#FFC300","#FFFFFF"];
                var rowObj = new Array();
                var seek = 0 * 1; var pValue = 0 * 1;
                var rowCounter;
                for (rowCounter = 0; rowCounter < noOfRows; rowCounter++) {
                    seek = 0 * 1;
                    var dateValue = trendValues.getValue(rowCounter, 0);
                    rowObj[seek++] = formatMySqlDateFormat(dateValue);
                    var currentTotal = trendValues.getValue(rowCounter, 5);
                    currentTotal = currentTotal.toFixed(0);
                    if (trendValues.getColumnLabel(6) === 'Passed') {
                        pValue = (trendValues.getValue(rowCounter, 6) / currentTotal).toFixed(4) * 1;
                        rowObj[seek++] = pValue;
                        rowObj[seek++] = trendValues.getValue(rowCounter, 6).toFixed(0);
                        rowObj[seek++] = trendValues.getValue(rowCounter, 6).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
                    }
                    else {
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                    }
                    if (trendValues.getColumnLabel(7) === 'Failed') {
                        pValue = (trendValues.getValue(rowCounter, 7) / currentTotal).toFixed(4) * 1;
                        rowObj[seek++] = pValue;
                        rowObj[seek++] = trendValues.getValue(rowCounter, 7).toFixed(0) + '';
                        rowObj[seek++] = trendValues.getValue(rowCounter, 7).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
                    }
                    else {
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                    }
                    if (trendValues.getColumnLabel(8) === 'Errors') {
                        pValue = (trendValues.getValue(rowCounter, 8) / currentTotal).toFixed(4) * 1;
                        rowObj[seek++] = pValue;
                        rowObj[seek++] = trendValues.getValue(rowCounter, 8).toFixed(0) + '';
                        rowObj[seek++] = trendValues.getValue(rowCounter, 8).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
                    }
                    else {
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                    }
                    if (trendValues.getColumnLabel(9) === 'Skipped') {
                        pValue = (trendValues.getValue(rowCounter, 9) / currentTotal).toFixed(4) * 1;
                        rowObj[seek++] = pValue;
                        rowObj[seek++] = trendValues.getValue(rowCounter, 9).toFixed(0) + '';
                        rowObj[seek++] = trendValues.getValue(rowCounter, 9).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
                    }
                    else {
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                    }
                    /* code for team in tooltip*/
                    if (trendValues.getColumnLabel(1) === 'Project') {
                        rowObj[seek++] = 0;
                        rowObj[seek++] = trendValues.getValue(rowCounter, 1);
                    }
                    else {
                        rowObj[seek++] = null;
                        rowObj[seek++] = null;
                    }
                    trendTable.addRow(rowObj);
                }
                var formatterMedium = new google.visualization.DateFormat({ formatType: 'medium' });
                formatterMedium.format(trendTable, 0);
                trendTable.setColumnLabel(7, "");
                trendChart.setDataTable(trendTable);
                trendChart.draw();
                var errorObjectContainer = document.getElementById("suiteFilter");
                var errorObjectDiv = errorObjectContainer.getElementsByTagName("div");
                var errorObject = errorObjectDiv[1].getElementsByTagName("span");
                if (errorObject) {
                    for (rowCounter = 0; rowCounter < errorObject.length; rowCounter++) {
                        errorObject[rowCounter].style.display = 'none';
                    }
                }
            }
            handleTrendResponse.drawTrendChart = drawTrendChart;

Legend populated in the graph

1 个答案:

答案 0 :(得分:0)

这里创建了表并添加了列......

    var trendTable = new google.visualization.DataTable();
    trendTable.addColumn('string', 'Execution Date');              // 0
    trendTable.addColumn('number', 'PASSED');                      // 1
    trendTable.addColumn({ type: 'string', role: 'annotation' });  // 2
    trendTable.addColumn({ type: 'string', role: 'tooltip' });     // 3
    trendTable.addColumn('number', 'FAILED');                      // 4
    trendTable.addColumn({ type: 'string', role: 'annotation' });  // 5
    trendTable.addColumn({ type: 'string', role: 'tooltip' });     // 6
    trendTable.addColumn('number', 'ERRORS');                      // 7
    trendTable.addColumn({ type: 'string', role: 'annotation' });
    trendTable.addColumn({ type: 'string', role: 'tooltip' });
    trendTable.addColumn('number', 'SKIPPED');
    trendTable.addColumn({ type: 'string', role: 'annotation' });
    trendTable.addColumn({ type: 'string', role: 'tooltip' });

稍后,在绘制图表之前,将删除列标签,因此会显示空白的图例条目...

    trendTable.setColumnLabel(7, "");     // <-- remove this
    trendChart.setDataTable(trendTable);
    trendChart.draw();