我有一个带有双 Y 轴的组合图表。
玻利维亚和厄瓜多尔重叠
targetAxisIndex: 0.马达加斯加和埃塞俄比亚也叠在
targetAxisIndex: 1马达加斯加/埃塞俄比亚堆栈（共 45 个）重叠在玻利维亚/厄瓜多尔堆栈（共 25 个）之前。
我怎样才能并排放置两个堆栈？玻利维亚/厄瓜多尔目前隐藏在马达加斯加/埃塞俄比亚之后。
非常感谢任何提示！
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Ethiopia', 'Average'],
['2004/05', 10, 15, 20, 25, 18],
['2005/06', 10, 15, 20, 25, 18],
['2006/07', 10, 15, 20, 25, 18],
['2007/08', 10, 15, 20, 25, 18],
['2008/09', 10, 15, 20, 25, 18]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
vAxis: {
viewWindow: {
max: 35,
}
},
series: {
0: {type: 'bar', targetAxisIndex: 0},
1: {type: 'bar', targetAxisIndex: 0},
2: {type: 'bar', targetAxisIndex: 1},
3: {type: 'bar', targetAxisIndex: 1},
4: {type: 'line',targetAxisIndex: 0},
},
isStacked: true
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>=========工作更新==========================
更新1
我进步很大。 对于实际数据点，还有一个考虑因素。请运行此数据集并让我知道如何让所有列重新出现。当我输入真实数据时，我就失去了障碍。
仅供参考...添加
focusTarget: 'category'更新2
我对代码做了一些修改，现在可以看到初始抽奖时的所有条形。但是
mutationObservergoogle.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Made', 'PlanToMake', 'Delivered', 'PlanToDeliver', 'Goal'],
['2004/03', 10, 0, 10, 0, 10],
['2005/04', 8, 2, 8, 2, 10], //Crossover month
['2006/05', 0, 10, 0, 10, 10],
['2007/06', 0, 10, 0, 10, 10],
['2008/07', 0, 10, 0, 10, 10],
]);
var options = {
// title : 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
seriesType: 'bars',
legend: {
position: "top",
},
hAxis: {
slantedText: true,
slantedTextAngle: 90
},
focusTarget: 'category', //IMPORTANT for tooltips to look resonable
vAxis: {
viewWindow: {
max: 20,
}
},
series: {
0: {
type: 'bar',
targetAxisIndex: 0,
color: "rgb(0, 86, 145)"
},
1: {
type: 'bar',
targetAxisIndex: 0,
color: "rgb(252, 175, 23)"
},
2: {
type: 'bar',
targetAxisIndex: 1,
color: "rgb(0, 103, 174)"
},
3: {
type: 'bar',
targetAxisIndex: 1,
color: "rgb(252, 210, 28)"
},
4: {
type: 'line',
targetAxisIndes: 0,
color: "rgb(127, 198, 231)"
},
},
isStacked: true
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var chartLayout;
var chartBounds;
var legendColors = [];
var saveCoords = {};
google.visualization.events.addListener(chart, 'ready', function() {
// init chart elements
chartLayout = chart.getChartLayoutInterface();
chartBounds = chartLayout.getChartAreaBoundingBox();
var bars = chart.getContainer().getElementsByTagName('rect');
// find legend markers
Array.prototype.forEach.call(bars, function(bar) {
var color = bar.getAttribute('fill');
var xCoord = parseFloat(bar.getAttribute('x'));
var yCoord = parseFloat(bar.getAttribute('y'));
if ((xCoord >= chartBounds.left) && (yCoord < chartBounds.top) && (color !== '#ffffff')) {
legendColors.push(color);
}
});
// find bars
Array.prototype.forEach.call(bars, function(bar, index) {
var xCoord = parseFloat(bar.getAttribute('x'));
var yCoord = parseFloat(bar.getAttribute('y'));
if ((xCoord > chartBounds.left) && (yCoord > chartBounds.top)) {
var color = bar.getAttribute('fill');
var width = parseFloat(bar.getAttribute('width')) / 2;
bar.setAttribute('width', width);
saveCoords[xCoord + yCoord] = {
width: width,
x: xCoord
};
if (legendColors.indexOf(color) > 1) {
bar.setAttribute('x', xCoord + width);
//ORIGINAL
//saveCoords[xCoord + yCoord].x = xCoord + width;
//saveCoords[xCoord + width + yCoord] = saveCoords[xCoord + yCoord];
//UPDATED
saveCoords[xCoord + width + yCoord] = {
width: width,
x: xCoord + width,
};
}
}
});
var observer = new MutationObserver(function() {
// reset bars
var bars = chart.getContainer().getElementsByTagName('rect');
Array.prototype.forEach.call(bars, function(bar, index) {
var xCoord = parseFloat(bar.getAttribute('x'));
var yCoord = parseFloat(bar.getAttribute('y'));
if ((xCoord > chartBounds.left) && (yCoord > chartBounds.top)) {
var color = bar.getAttribute('fill');
//ORIGINAL
//if (saveCoords.hasOwnProperty(xCoord + yCoord)) {
// bar.setAttribute('width', saveCoords[xCoord + yCoord].width);
// bar.setAttribute('x', saveCoords[xCoord + yCoord].x);
//}
//UPDATED
var width = parseFloat(bar.getAttribute("width")) / 2;
if (saveCoords.hasOwnProperty(xCoord + width + yCoord)) {
bar.setAttribute("width", saveCoords[xCoord + width + yCoord].width);
bar.setAttribute("x", saveCoords[xCoord + width + yCoord].x);
}
}
});
});
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
});
chart.draw(data, options);
window.addEventListener('resize', function() {
chart.draw(data, options);
});
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>