Javascript 带堆叠&;团体

Javascript 带堆叠&;团体,javascript,Javascript,我已经准备好了谷歌的“条形图”,如下所示。它工作正常。我怎样才能将条形图的方向从垂直改为水平 我尝试使用vAxis:{direction:-1}更改图表的方向,但不起作用 我试图从谷歌图表网站获得解决方案,但我找不到任何其他解决方案与堆叠和组水平条形图。有没有其他方法可以改变谷歌条形图的方向 网页设计 load('current',{'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); 函数绘图图(){ var d

我已经准备好了谷歌的“条形图”,如下所示。它工作正常。我怎样才能将条形图的方向从垂直改为水平

我尝试使用
vAxis:{direction:-1}
更改图表的方向,但不起作用

我试图从谷歌图表网站获得解决方案,但我找不到任何其他解决方案与堆叠和组水平条形图。有没有其他方法可以改变谷歌条形图的方向


网页设计
load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
变量选项={
isStacked:true,pointSize:15,
言辞:{
视图窗口:{
分:0,,
}
},
图例:{
位置:'底部',
文本样式:{
粗体:错,
尺寸:12,
}
},
is3D:是的,
阀门:{
0:{
标题:“拉丁美洲和加勒比海的价值”
},
1: {
网格线:{
颜色:“透明”
},
文本样式:{
颜色:“透明”
}
},
2: {
网格线:{
颜色:“透明”
},
文本样式:{
颜色:“透明”
}
},
},
系列:{
0: {
targetAxisIndex:0,
颜色:“#2A6DDA”
},
1: {
目标指数:1,
颜色:“#FF5733”
},
2: {
目标指数:1,
颜色:“#FFC300”
},
3: {
目标指数:1,
颜色:“#D3A4FA”
},
},
};
var chart=new google.charts.Bar(document.getElementById('columnchart_material');
绘制(数据,google.charts.Bar.convertOptions(选项));
}

以下是谷歌图表在其示例中的做法

您需要的是使用“corecharts”而不是“bars”,然后将调用更改为
google.visualization.BarChart()
,您将得到水平条


网页设计
google.charts.load('current'{
“包”:[“核心图表”]
});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
变量选项={
isStacked:是的,
点数:15,
言辞:{
视图窗口:{
分:0,,
}
},
图例:{
位置:'底部',
文本样式:{
粗体:错,
尺寸:12,
}
},
is3D:是的,
阀门:{
0: {
标题:“拉丁美洲和加勒比海的价值”
},
1: {
网格线:{
颜色:“透明”
},
文本样式:{
颜色:“透明”
}
},
2: {
网格线:{
颜色:“透明”
},
文本样式:{
颜色:“透明”
}
},
},
系列:{
0: {
targetAxisIndex:0,
颜色:“#2A6DDA”
},
1: {
目标指数:1,
颜色:“#FF5733”
},
2: {
目标指数:1,
颜色:“#FFC300”
},
3: {
目标指数:1,
颜色:“#D3A4FA”
},
},
};
var chart=新的google.visualization.BarChart(document.getElementById(“columnchart_material”);
图表绘制(数据、选项);
}

您可能希望使用“corechart”软件包而不是“bar”来访问条形图,请参见下面我的答案以获取示例。先生,感谢您的回答,我想详细说明我的问题以使其更清晰。我想在这张图中将费用与利润+销售额进行比较。按照我的要求,在集群/集团年度内,一个酒吧显示为费用,另一个酒吧显示为利润和销售额。如果我理解正确,那么您只需要调整您的阵列。每年有两行,一行是费用,另一行是利润和销售额。如果你的答案是正确的,那么你就会很乐意去做。很乐意帮助你做任何你需要的事情,但是如果这个答案是正确的