即使在显式更改其数据类型后更改 google.visualization.DataTable() 列值时出现类型不匹配错误

Question

我有一个数据table 正在被 google.visualization.data.group()

编辑 return

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>';
}

我检查了日志中的列数据类型，它确实 return 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

数据正在读入数据table

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

数据 table 方法 setColumnProperties 没有按照您的预期进行。

它只设置列的属性部分 --> 'p':{'html':true}

因此，在您的代码运行后，您最终会在列属性中看到以下内容。

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

事实上，无法更改列的类型，
一旦它被创建。

相反，您需要使用 addColumn 或 insertColumn 方法。

另一种选择是使用数据视图。
那么您可以使用计算列作为工具提示，
并排除您要更改的原始列，
在数据视图上使用 setColumns 方法。

即使在显式更改其数据类型后更改 google.visualization.DataTable() 列值时出现类型不匹配错误

Type Mismatch error when altering a google.visualization.DataTable() column value even after explicitly changing its data type

google-visualization