Question

当我在Google云端硬盘上使用区域图时，我可以选择“切换行/列”＃34;的选项。

现在我正在玩Javascript API，我想做同样的事情，但无法在文档中找到方法。

这是我成功使用的代码。我只需要在API上切换行/列。

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['data',0,1,2,3,4,5,6]
,['2013-04-14 (336)',064,04,03,02,06,02,02]
,['2013-04-21 (169)',0,028,03,02,04,02,02]
,['2013-04-28 (121)',0,0,027,02,01,02,02]
,['2013-05-05 (101)',0,0,0,020,0,01,0]
,['2013-05-12 (688)',0,0,0,0,0143,017,07]
,['2013-05-19 (3226)',0,0,0,0,0,0642,022]
,['2013-05-26 (321)',0,0,0,0,0,0,082]
]);

var options = {
title: 'Company Performance', isStacked:true,
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

有人可以帮忙吗？

Answer 1

不幸的是你必须转置DataTable。以下代码将完成这项工作。如果有人可以改进它，请分享改进版本。此函数也可以传递DataView。

在您的情况下：var transposedData = transposeDataTable（data）;

  function transposeDataTable(dataTable) {
            //step 1: let us get what the columns would be
            var rows = [];//the row tip becomes the column header and the rest become
            for (var rowIdx=0; rowIdx < dataTable.getNumberOfRows(); rowIdx++) {
                var rowData = [];
                for( var colIdx = 0; colIdx < dataTable.getNumberOfColumns(); colIdx++) {
                    rowData.push(dataTable.getValue(rowIdx, colIdx));
                }
                rows.push( rowData);
            }
            var newTB = new google.visualization.DataTable();
            newTB.addColumn('string', dataTable.getColumnLabel(0));
            newTB.addRows(dataTable.getNumberOfColumns()-1);
            var colIdx = 1;
            for(var idx=0; idx < (dataTable.getNumberOfColumns() -1);idx++) {
                var colLabel = dataTable.getColumnLabel(colIdx);
                newTB.setValue(idx, 0, colLabel);
                colIdx++;
            }
            for (var i=0; i< rows.length; i++) {
                var rowData = rows[i];
                console.log(rowData[0]);
                newTB.addColumn('number',rowData[0]); //assuming the first one is always a header
                var localRowIdx = 0;

                for(var j=1; j< rowData.length; j++) {
                    newTB.setValue(localRowIdx, (i+1), rowData[j]);
                    localRowIdx++;
                }
            }
            return newTB;
      }

来源和信用： http://captaindanko.blogspot.sg/2013/05/transpose-of-google-visualization-data.html 例： https://bitbucket.org/cptdanko/blog-code/src/0666cdce533db48cd89a4e2f02ef7e87a891c857/transpose.html?at=default

Answer 2

在第一列标签上使用getDate函数的更整洁，更高效的版本。

这是一个很好的详细版本，用于解释正在发生的事情 -

function transposeDateDataTable (dataTable) {

    // Create new datatable

    var newDataTable = new google.visualization.DataTable ();

    // Add first column from original datatable

    newDataTable.addColumn ('string', dataTable.getColumnLabel (0));

    // Convert column labels to row labels

    for (var x=1; x < dataTable.getNumberOfColumns (); x++) {
        var label = dataTable.getColumnLabel (x);
        newDataTable.addRow ([label]);
    }

    // Convert row labels and data to columns

    for (var x=0; x < dataTable.getNumberOfRows (); x++) {
        newDataTable.addColumn ('number', dataTable.getValue (x, 0).getDate ()); // Use first column date as label
        for (var y=1; y < dataTable.getNumberOfColumns (); y++) {
            newDataTable.setValue (y-1, x+1, dataTable.getValue (x, y));
        }
    }

    return newDataTable;

}

或者漂亮而紧凑的版本......

function transposeDateDataTable (dt) {
    var ndt = new google.visualization.DataTable;
    ndt.addColumn ('string',dt.getColumnLabel(0));
    for (var x=1; x<dt.getNumberOfColumns(); x++)
        ndt.addRow ([dt.getColumnLabel(x)]);
    for (var x=0; x<dt.getNumberOfRows(); x++) {
        ndt.addColumn ('number', dt.getValue(x,0).getDate());
        for (var y=1; y<dt.getNumberOfColumns(); y++)
            ndt.setValue (y-1, x+1, dt.getValue (x,y));
    }
    return ndt;
}

在Google Area Chart上反转行和列

2 个答案: