将Y轴添加到Google堆积柱形图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将Y轴添加到Google堆积柱形图相关的知识，希望对你有一定的参考价值。
我一直在使用谷歌图表工具创建柱形图，但我很难在我的图表中添加Y轴。我只需要在图表左侧的轴上显示一系列标准值。
我能够创建和操纵X轴，但Y轴不会出现某些原因。我确信这里有一些简单的东西。
如果下面的代码很乱，我也很抱歉，我对此很新。
<head>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
chartArea: { width: "100%"},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>
提前致谢，
答案
y轴被图表选项 - > chartArea: {width: "100%"}隐藏
chartArea控制条形中心部分的大小，
并且不包括任一轴或顶部的标签
在height之外使用width和chartArea作为整个图表
如果你想最大化图表区域，那么在left，bottom，top和/或right上设置限制，
建议更换以下内容......
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}
},
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>以上是关于将Y轴添加到Google堆积柱形图的主要内容，如果未能解决你的问题，请参考以下文章
c#winform应用程序，要实现生成一个柱形图，该柱形图有一个y轴，两个x轴，已显示两组数据。两