谷歌图表数据视图动态设置列

Question

我正在使用谷歌图表在网页上呈现数据。我使用 CSV 作为输入，然后处理该数据以供 google chart api 使用。

我想在条形图/柱形图的顶部显示列值。我发现如果您创建一个数据视图并执行 view.setColumns 并指定角色注释，那么数字会在图表顶部显示，否则您需要将鼠标悬停在图表上才能看到确切的值。

我的问题是我无法为视图动态设置列和角色。由于输入是 csv，我永远无法确定列。

主要目的是在条形图上显示数字，如果有其他替代方法可以做到，那么也将不胜感激。干杯

var arrayData = csvAttr.toArrays(csvString, {
                onParseValue : csvAttr.hooks.castToScalar
            });

var data = new google.visualization.arrayToDataTable(arrayData);
view = new google.visualization.DataView(data);

             view.setColumns([0, 1,
                               { calc: "stringify",
                                 sourceColumn: 1,
                                 type: "string",
                                 role: "annotation" },
                               2,
                               { calc: "stringify",
                                     sourceColumn: 2,
                                     type: "string",
                                     role: "annotation" },
                                3,
                                { calc: "stringify",
                                     sourceColumn: 3,
                                     type: "string",
                                     role: "annotation" }

                               ]);

Answer 1

动态设置列的简单方法。

var totalColumns = 3  
var view = new google.visualization.DataView(dataTable); 
var columns = [];
for (var i = 0; i <= totalColumns ; i++) {
    if (i > 0) {
        columns.push(i);
        columns.push({
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        });

    } else {
        columns.push(i);
    }
}

view.setColumns(columns);