Создание гистограмм с группами данных

Question

Итак, я пытаюсь создать гистограмму, которая содержит три разных столбца для каждой записи, сколько человек прошло тест, сколько провалилось и сколько прошло, все вместе для каждого теста. Мой код выглядит так:

for (i = 0; i < evolNumber; i++) {
    if (chosenReports[i] == 1) {
        reportAttemptSummary += '<td class="TableArea" style="width:20px" align="center" valign="bottom">' +
        attemptTotal[i] +
        '<div style="background:black;width:20px;height:' +
        (attemptTotal[i] * 4) +
        'px"> </div>'+
        '</td>' +
        '<td class="TableArea" style="width:20px" align="center" valign="bottom">' +attemptPass[i]+
        '<div style="background:green;width:20px;height:' +
        (attemptPass[i] * 4) +
        'px"> </div>' +
        '</td>' +
        '<td class="TableArea" style="width:20px" align="center" valign="bottom">' +
        attemptFail[i] +
        '<div style="background:red;width:20px;height:' +
        (attemptFail[i] * 4) +
        'px"> </div>' +
        '</td>';
    }
}

Как заставить эти три бара иметь один заголовок под всеми тремя:

Answer 1

Так как вы, кажется, выводите таблицу HTML, вам нужно создать строку сразу после строки со столбцами.Так что, если вы хотите иметь один заголовок, который охватывает 3 бара, то:

  <tr>
     <td colspan="3">Your single title here</td>
  </tr>

выполнит трюк, если вы выведете его после строки с барами.