Google Charts Data View動態設置列

Question

我正在使用Google圖表在網頁上呈現數據。 我使用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);