我的目标是将两个或多个具有相应目标线的列堆栈聚类。
获得此图表的最佳方法是什么？
我最初的想法是使用ComboChart。我只能用多行完成一个堆栈栏。
我能够尝试使用“条形图”类型图表（在代码段下方），并使用两个轴完成了两个群集的条形图堆栈，但无法获取线。我也认为将来这可能会限制为只有两个堆栈。
任何想法？一如既往的感谢！
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Goal Line 1', 'Profit', 'Bonus', 'Goal Line 2'],
['2014', 1000, 400, 400, 200, 50, 500],
['2015', 1170, 460, 400, 250, 2000, 500],
['2016', 660, 1120, 400, 300, 10, 500],
['2017', 1030, 540, 400, 350, 15, 500]
]);
var options = {
bars: 'vertical',
isStacked: true,
series: {
0: { targetAxisIndex: 1 },
1: { targetAxisIndex: 1 },
2: { targetAxisIndex: 1 }, //this should be a line
3: { targetAxisIndex: 2 },
4: { targetAxisIndex: 2 },
5: { targetAxisIndex: 2 } //this should be a line
},
vAxes: {
},
height: 400,
xcolors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="chart_div"></div>
<br/>============更新=============因此，我现在尝试了带有两个轴的ColumnChart。我可以看到我现在得到了两个堆栈，但它们在另一个堆栈的前面。您会看到红色/橙色堆栈从蓝色/紫色堆栈后面伸出。
是否可以将堆栈1向左偏移，将堆栈2向右偏移？然后我认为图表可以在我的应用程序中使用。
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Ax1 line', 'Stack1 1', 'Stack1 2', 'Ax2 line', 'Stack2 1', 'Stack2 2'],
['2004/05', 10, 110, 210, 710, 810, 910],
['2005/06', 20, 120, 220, 720, 820, 920],
['2006/07', 30, 130, 230, 730, 830, 930],
['2007/08', 40, 140, 240, 740, 840, 940],
['2008/09', 50, 150, 250, 750, 850, 950]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
seriesType: 'bars',
series: {
0: { type: 'line', targetAxisIndex: 1},
1: { type: 'bars', targetAxisIndex: 1},
2: { type: 'bars', targetAxisIndex: 1},
3: { type: 'line', targetAxisIndex: 2},
4: { type: 'bars', targetAxisIndex: 2},
5: { type: 'bars', targetAxisIndex: 2}
},
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>
这里的问题，material图表不支持组合图表（添加线）。和经典图表不支持多个堆栈。
但是，通过在列系列之间添加线系列，并将一个移动到另一个y轴，堆栈会彼此分开，但会分开。
在图表的'ready'事件中，我们可以将两个堆栈的大小减少一半，然后向右移动第二个堆栈。
这里最大的问题是互动性。图表会将所有列重置为互动时的原始位置，例如悬停。因此，我们必须使用MutationObserver来防止复位。
但是，还有一些小问题我还没有解决。
当您将鼠标悬停在第一个堆栈上时，工具提示会显示在原始位置的上方。并且原始位置周围有一个亮点。
到目前为止是我这里的...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Ax1 line', 'Stack1 1', 'Stack1 2', 'Ax2 line', 'Stack2 1', 'Stack2 2'],
['2004/05', 10, 110, 210, 710, 810, 910],
['2005/06', 20, 120, 220, 720, 820, 920],
['2006/07', 30, 130, 230, 730, 830, 930],
['2007/08', 40, 140, 240, 740, 840, 940],
['2008/09', 50, 150, 250, 750, 850, 950]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
seriesType: 'bars',
series: {
0: { type: 'line', targetAxisIndex: 0},
1: { type: 'bars', targetAxisIndex: 0},
2: { type: 'bars', targetAxisIndex: 0},
3: { type: 'line', targetAxisIndex: 1},
4: { type: 'bars', targetAxisIndex: 1},
5: { type: 'bars', targetAxisIndex: 1}
},
isStacked: true,
legend: {
maxLines: 2,
position: 'top'
},
tooltip: {
target: 'both'
}
};
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);
saveCoords[xCoord + yCoord].x = xCoord + width;
saveCoords[xCoord + width + yCoord] = saveCoords[xCoord + yCoord];
}
}
});
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');
if (saveCoords.hasOwnProperty(xCoord + yCoord)) {
bar.setAttribute('width', saveCoords[xCoord + yCoord].width);
bar.setAttribute('x', saveCoords[xCoord + yCoord].x);
}
}
});
});
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
});
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});#chart_div {
height: 400px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>注：一旦在此处发布，我也发现了一个问题。目前，图例必须完全显示在一行上。要在此处运行示例，必须运行该代码段，然后单击整页。