1

我想显示我的图形,但以垂直方式显示,而不是像以下图像上显示的那样,并且如果可能的话也隐藏图例。旋转整个Google图表

在此先感谢您的帮助。

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); 
    } 
+0

如果你想任何帮助 – scraaappy

回答

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>

+0

非常感谢第二种解决方案,但它可能具有结果的对称性? –

+0

我编辑我的问题,以显示我的意思是对称:) –

+0

上面更改的片段绘制两个图表 - 使用DataView将值设置为DataTable中的相反符号 - 使用对象表示法,以便值仍然显示为正确的标志... – WhiteHat

0

你可以用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>

+0

太好了,我会做,现在提供你的代码!非常感谢 ! :D另一个问题,“变形起源”是如何工作的? –

+0

只是googlize它;)https://www.w3schools.com/cssref/css3_pr_transform-origin.asp。另外,不要忘记验证最好的答案(这是@ WhiteHat的一个!;) – scraaappy

+0

感谢您的所有信息;) –