反转谷歌面积图上的行和列答案

【问题标题】：Inverting rows and columns on Google Area Chart反转谷歌面积图上的行和列
【发布时间】：2013-06-05 21:12:33
【问题描述】：

当我在 Google Drive 上使用面积图时，我可以选择“切换行/列”选项。

现在我正在使用 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>

谁能帮忙？

【问题讨论】：

标签： charts area

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：