Google Charts ComboChart,其中包含非堆叠的条形图,堆叠的条形图和线

时间:2020-07-21 13:02:44

标签: javascript google-visualization

我最近在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();

0 个答案:

没有答案