我最近在Google Charts上遇到问题。我正在尝试创建一个连续25年显示数据的组合图。对于每一年,我想代表两个条形图,其中一个条形图堆叠(由两个数据值组合)。除此之外,我还要创建两条虚线,以表示两个条形图的平均值。最后,我想获得一个如以下给定屏幕截图所示的结果: Example-Chart. This is what it shoud look like
到目前为止,我已经尝试了几种选项组合,但仍无法实现正确的解决方案。我可以将它们全部堆叠起来,也可以不堆叠它们。我尝试了第二个vAxis,但是这些条形出现在彼此的前面/后面,因此不可见(=它们是重叠的)。如何实现组合堆积和未堆积条形图,同时仍然能够向其添加水平线?
在我的代码中,平均值的数字现在已经硬编码(8000和7000),但这不必担心。
let data = new google.visualization.DataTable();
data.addColumn('string', 'Jahr');
data.addColumn('number', 'Kosten ALT');
data.addColumn('number', 'AfA');
data.addColumn('number', 'Kosten NEU');
data.addColumn('number', 'Ø ALT');
data.addColumn('number', 'Ø NEU');
let maxValue = 0;
for(let i = 0; i < years.length; i++){
data.addRow([[i+1].toString(), years[i].energy_costs_existent, years[i].repayment, years[i].community_tariff, 8000, 7000]);
maxValue = Math.max(years[i].energy_costs_existent, maxValue);
}
let options = {
isStacked: true,
width: 600,
height: 400,
chart: {
title: 'Liquidität',
subtitle: 'Aufwand p.A.'
},
vAxis: {
viewWindow: {
min: 0,
max: maxValue*1.3
}
},
seriesType: 'bars',
series: {
0: {
color: '#fe0609'
},
1: {
color: '#999999'
},
2:{
color: '#1ba65e'
},
3:{
type: 'line',
lineDashStyle: [2,2],
color: '#fe0609'
},
4:{
type: 'line',
lineDashStyle: [2,2],
color: '#1ba65e'
},
},
};
let chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: markup_id,
dataTable: data,
options: google.charts.Bar.convertOptions(options)
});
//zoomChart is a function that allows me to click on a g-chart and get a zoomed-in
//version in a popup. This is the reason, why I would need a ChartWrapper,
//in case you were wondering
this.zoomChart(chart, markup_id, 1.5);
chart.draw();