1

Google ドライブで面グラフを使用する場合、「行と列を切り替える」オプションを選択できます。

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>

誰でも助けることができますか？

4

2 に答える 2

5

残念ながら、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=デフォルト

于 2014-01-26T09:47:31.330 に答える
3

最初の列ラベルで 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;
}
于 2014-09-22T10:43:04.520 に答える