Javascript Google图形Y轴的一个值(两个图表的堆叠列)
完整代码 你可以使用太多的测试Javascript Google图形Y轴的一个值(两个图表的堆叠列),javascript,charts,google-visualization,Javascript,Charts,Google Visualization,完整代码 你可以使用太多的测试 google.load('visualization', '1.1', { 'packages': ['bar'] }); google.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addC
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
输出
问题
我使用谷歌可视化来生成上面的图表
如果您看到上面的屏幕截图,您可以看到上面图表的Y轴在左侧和右侧有两个值。这似乎是因为图表的左侧和右侧栏使用了两个日期范围
我想删除右侧Y轴或打印右侧和左侧Y轴的相同值。我的意思是所有数据都应该在左边的Y轴下。我能做些什么呢?系列的选项。n.targetAxisIndex创建第二个轴
删除这些选项将允许所有系列默认为第一个轴 但是,在材质条形图中,将系列移动到不同的轴,
将序列分成多个堆栈,从而产生蓝色和红色条
删除上述选项将把所有系列组合成一个蓝色堆栈 为了保持堆叠以两种颜色分开,
必须使用
series.n.targetAxisIndex
,并将显示“双轴”
要保持两轴同步,请使用选项-->vAxis.viewWindow
这将为两个轴设置相同的范围
vAxis: {
viewWindow: {
min: 0,
max: 1800
}
}
请参阅以下工作片段
google.charts.load('current'{
套餐:['bar']
}).然后(抽丝);
函数drawStuff(){
var data=new google.visualization.DataTable();
data.addColumn('string','Topping');
data.addColumn('number','Nescafe Instant');
data.addColumn('number','Folgers Instant');
data.addColumn('number','Nescafe bean');
data.addColumn('number','Folgers bean');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
变量选项={
isStacked:是的,
宽度:800,
身高:600,
图表:{
标题:“逐年咖啡消费量”,
副标题:“此数据不真实”
},
系列:{
2: {
目标指数:1
},
3: {
目标指数:1
}
},
言辞:{
视图窗口:{
分:0,,
最高:1800
}
}
};
var chart=new google.charts.Bar(document.getElementById('chart_div');
绘制(数据,google.charts.Bar.convertOptions(选项));
}