Ошибка несоответствия типов при изменении значения столбца google.visualization.DataTable () даже после явного изменения его типа данных

Question

У меня есть таблица данных, которая возвращается google.visualization.data.group()

var aggData = google.visualization.data.group(
        view,
        [0],
        aggColumns
);

Я хочу установить несколько столбцов типа строки с ролью всплывающей подсказки и преобразовать значения в них в строку html

for (var col=2; col < aggData.getNumberOfColumns(); col = col + 2){
    aggData.setColumnProperties(col,{'type':'string', 'role':'tooltip', 'p':{'html':true}});
    //looking to see if the column type was actually changed
    console.log('Column '+col+' type: ' + aggData.getColumnProperty(col, 'type'))
    for (var row = 0; row < aggData.getNumberOfRows(); row = row + 1){
        aggData.setValue(row, col, getHTML(aggData.getValue(row, col)))
    }
}

function getHTML(count) {;
    return 'Projects Completed: <b>' + count + '</b>';
}

Я проверил тип данных столбца в журнале, и он возвращает string, но когда я устанавливаю значение в строку, он выдает ошибку несоответствия типов.

Column 2 type: string
Uncaught Error: Type mismatch. Value Projects Completed: <b>2</b> does not match type number in column index 2

Я также пытался установить тип столбца с помощью метода setColumnProperty(), но это тот же результат. Чего мне не хватает?

============================================ ================================================== =======

Ниже приведен фрагмент более крупного скрипта, если необходимо

Пример входных данных выглядит как

"Oct 1, 2019, 12:00:00 AM",Team C,68
"Sep 23, 2019, 12:00:00 AM",Team C,68
"Nov 29, 2019, 12:00:00 AM",Team C,87
"Dec 31, 2019, 12:00:00 AM",Team C,62
 ....................................
"Nov 21, 2018, 12:00:00 AM",Team A,79
"Dec 29, 2018, 12:00:00 AM",Team A,58
"Nov 15, 2018, 12:00:00 AM",Team B,96
"Dec 29, 2018, 12:00:00 AM",Team B,77

Данные считываются в таблица данных

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Year');
data.addColumn('string', 'Team');
data.addColumn('number', 'Total Score');


var groupData = google.visualization.data.group(
    data,
    [
        {
            column: 0,
            modifier: getYear,
            type: 'number'
        },
        1
    ],
    [
        {
            column: 2,
            aggregation: google.visualization.data.sum,
            type: 'number'
        },
        {
            column: 2,
            aggregation: google.visualization.data.count,
            type: 'number',
            role: 'tooltip'
        }
    ]
);

// create data view from groupData
var view = new google.visualization.DataView(groupData);

// sum column array
var aggColumns = [];

// use year (column 0) as first view column
var viewColumns = [0];

// build calculated view & agg columns for each team
groupData.getDistinctValues(1).forEach(function (team, index) {
    // add a column to the view for each team
    viewColumns.push({
        calc: function (dt, row) {
            if (dt.getValue(row, 1) === team) {
                return dt.getValue(row, 2);
            }
            return null;
        },
        label: team,
        type: 'number'
    });

    viewColumns.push({
        calc: function (dt, row) {
            if (dt.getValue(row, 1) === team) {
                return dt.getValue(row, 3);
            }
            return null;
        },
        label: 'Number of Projects',
        type: 'number'
    });

    // add sum column for each team
    aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index*2 + 1,
        label: team,
        type: 'number'
    });

    aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index*2 + 2,
        type: 'number',
        role: 'tooltip',
    });
});

// set view columns
view.setColumns(viewColumns);
var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
);
/*
The aggData looks like

"2,018",137,2,173,2,0,0 
"2,019",864,12,"1,028",12,610,12
 */

for (var col=2; col < aggData.getNumberOfColumns(); col = col + 2){
    aggData.setColumnProperties(col,{'type':'string', 'role':'tooltip', 'p':{'html':true}});
    console.log('Column '+col+' type: ' + aggData.getColumnProperty(col, 'type'))
    for (var row = 0; row < aggData.getNumberOfRows(); row = row + 1){
        aggData.setValue(row, col, getHTML(aggData.getValue(row, col)))
    }
}

Answer 1

метод таблицы данных setColumnProperties не выполняет то, что вы ожидаете.

устанавливает только часть свойств столбца -> 'p':{'html':true}

, поэтому после выполнения кода вы получите следующее в свойствах столбца.

'p': {'type':'string', 'role':'tooltip', 'p':{'html':true}}

и фактически невозможно изменить тип столбца,
после его создания.

Вместо этого вам необходимо использовать метод addColumn или insertColumn.

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