Googleのグラフ全体を回転する

Question

私はグラフを表示したかったが、以下の画像を表示するような縦向きではなく、可能であれば凡例を隠すようにしたかった。

ご協力いただきありがとうございます。

Charts horizontal to vertical

Symmetry of the rotation

google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic); 


function drawBasic() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('number', 'X'); 
     data.addColumn('number', 'Dogs'); 

     data.addRows([ 
     [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
     [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], 
     [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], 
     [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], 
     [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], 
     [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], 
     [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], 
     [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], 
     [48, 72], [49, 68], [50, 66], 
     ]); 

     var options = { 
     hAxis: { 
      textPosition:"none" 
     }, 
     vAxis: { 
      textPosition:"none" 
     }, 

     }; 


     var chart = new google.visualization.LineChart(document.getElementById('chart_div')) 

     chart.draw(data, options); 
    } 

Answer 1

の

使用チャートのオプション...

orientation: 'vertical' 

と...

legend.position: 'none' 

次の作業のスニペットを参照してください...

それも埋めるためにchartAreaのサイズを大きく示していますコンテナ

このグラフはデフォルトでは実行されません。

chartArea: { 
    top: 6, 
    right: 6, 
    bottom: 6, 
    left: 6, 
    height: '100%', 
    width: '100%' 
}, 

---

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y'); 
 

 
    data.addRows([ 
 
    [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
 
    [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], 
 
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], 
 
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], 
 
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], 
 
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], 
 
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], 
 
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], 
 
    [48, 72], [49, 68], [50, 66], 
 
    ]); 
 

 
    var options = { 
 
    chartArea: { 
 
     top: 6, 
 
     right: 6, 
 
     bottom: 6, 
 
     left: 6, 
 
     height: '100%', 
 
     width: '100%' 
 
    }, 
 
    hAxis: { 
 
     textPosition: 'none' 
 
    }, 
 
    height: 800, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    orientation: 'vertical', 
 
    vAxis: { 
 
     textPosition: 'none' 
 
    }, 
 
    width: 200 
 
    }; 
 

 
    var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0')); 
 
    chart0.draw(data, options); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, { 
 
    calc: function (dt, row) { 
 
     return { 
 
     v: dt.getValue(row, 1) * -1, 
 
     f: dt.getFormattedValue(row, 1), 
 
     }; 
 
    }, 
 
    label: data.getColumnLabel(1), 
 
    type: data.getColumnType(1) 
 
    }]); 
 

 
    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1')); 
 
    chart1.draw(view, options); 
 
}

div { 
 
    display: inline-block; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div0"></div> 
 
<div id="chart_div1"></div>

Answer 2

あなたは、CSSでこれを達成（および凡例を非表示にするオプションでlegend: {position: 'none'}を追加）することができます

google.charts.load('current', {packages: ['corechart', 'line']}); 
 

 
google.charts.setOnLoadCallback(drawBasic); 
 

 
function drawBasic() { 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Dogs'); 
 

 
    data.addRows([ 
 
    [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
 
    [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], 
 
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], 
 
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], 
 
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], 
 
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], 
 
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], 
 
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], 
 
    [48, 72], [49, 68], [50, 66], 
 
    ]); 
 

 
    var options = { 
 
    hAxis: { 
 
     textPosition:"none" 
 
    }, 
 
    vAxis: { 
 
     textPosition:"none" 
 
    }, 
 
    legend: {position: 'none'} 
 
    }; 
 

 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')) 
 

 
    chart.draw(data, options); 
 
}

#chart_div{ 
 
    transform-origin: 80% 50%; 
 
    transform:rotate(-90deg); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>