如何在旋转Google Visualization DataTable时保留工具提示

时间:2014-02-13 20:10:51

标签: javascript php google-visualization

我正在使用@asgallant的一些优秀代码来转移Google DataTable以用于折线图。他的代码在这里:http://jsfiddle.net/asgallant/HkjDe/

在我原来的DataTable中,我有第4列,但这是一个工具提示字符串。当我用他的代码转动表时我的工具提示如果不再可用。我想使用提供的工具提示,并为“创建”的单元格使用一些标准的工具提示文本。这是我的初始表设置版本的样子。

var data = new google.visualization.DataTable();
data.addColumn('number', 'A');
data.addColumn('string', 'B');
data.addColumn('number', 'C');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
    [1, 'foo', 6, 't1'],
    [2, 'foo', 2, 'hello'],
    [3, 'foo', 1, 't2'],
    [4, 'foo', 3, 'test'],
    [1, 'bar', 7, 't3'],
    [2, 'bar', 3, 'again'],
    [1, 'baz', 8, 't4'],
    [2, 'baz', 4, 'and'],
    [2, 'cad', 5, 't5'],
    [3, 'cad', 6, 'again'],
    [1, 'qud', 9, 'x'],
    [5, 'qud', 1, 'z']
]);

任何人都可以提供一些帮助吗?

- 更新 -

编辑初始的addRows语句,以更好地代表我的数据模型。

1 个答案:

答案 0 :(得分:1)

为了保留工具提示,您需要将工具提示列添加到视图和透视数据中:

for (var i = 0; i < distinctValues.length; i++) {
    viewColumns.push({
        type: 'number',
        label: distinctValues[i],
        calc: (function (x) {
            return function (dt, row) {
                // return values of C only for the rows where B = distinctValues[i] (passed into the closure via x)
                return (dt.getValue(row, 1) == x) ? dt.getValue(row, 2) : null;
            }
        })(distinctValues[i])
    });
    groupColumns.push({
        column: (i * 2) + 1,
        type: 'number',
        label: distinctValues[i],
        aggregation: google.visualization.data.sum
    });
    // add columns for the tooltips
    viewColumns.push({
        type: 'string',
        calc: (function (x) {
            return function (dt, row) {
                // return values of the tooltip column only for the rows where B = distinctValues[i] (passed into the closure via x)
                return (dt.getValue(row, 1) == x) ? dt.getValue(row, 3) : null;
            }
        })(distinctValues[i])
    });
    groupColumns.push({
        column: (i * 2) + 2,
        type: 'string',
        aggregation: function (values) {
            return values.join('');
        }
    });
}

组功能无法正确处理列角色,因此您必须在以后设置它们:

// fix the tooltip column roles, since the group function won't create them properly
for (var i = 1; i < pivotedData.getNumberOfColumns(); i++) {
    if (pivotedData.getColumnType(i) == 'string') {
        pivotedData.setColumnProperty(i, 'role', 'tooltip');
    }
}

参见示例:http://jsfiddle.net/asgallant/HkjDe/23/