Google Charts Combo Chart不适用于负值双Y轴

Question

我正在尝试创建带有条形图和一条线的组合图。 不幸的是，条形图开始渲染UNDERNEATH 0，如下所示： 我已经尝试过使用序列，vAxes等，但是我只是不知道为什么它不起作用。即使我尝试复制Google图表示例（https://developers.google.com/chart/interactive/docs/gallery/combochart），它仍然会在0以下开始渲染。 有人可以帮我吗？非常感谢你！

这是我现在的代码：

https://jsfiddle.net/f73j2c4t/

function drawChart() {
    var data = new google.visualization.DataTable({
    cols:[
    {id:"",label:"children(alle Produkte)",pattern:"",type:"string"},
    {id:"",label:"2017","pattern":"",type:"number"},
    {id:"",label:"2018","pattern":"",type:"number"}],

    rows:[
    {c:[{v:"Jan"},{v:2809071.1908},{v:457068.700399999}]},
    {c:[{v:"Feb"},{v:7279392.48370001},{v:25487241.91010001}]},
    {c:[{v:"Mar"},{v:15164932.691},{v:9540728.0996998}]},
    {c:[{v:"Apr"},{v:178699480.161936},{v:123739963.468178}]},
    {c:[{v:"Mai"},{v:43751922.3730972},{v:5883948.92010012}]},
    {c:[{v:"Jun"},{v:40731561.1560001},{v:27896485.9954001}]},
    {c:[{v:"Jul"},{v:14503044.8737},{v:7792566.08999991}]},
    {c:[{v:"Aug"},{v:53713728.5248044},{v:41201792.2465999}]},
    {c:[{v:"Sep"},{v:70934884.5715999},{v:55525900.4029}]},
    {c:[{v:"Okt"},{v:12255561.1074006},{v:9710841.99769991}]},
    {c:[{v:"Nov"},{v:6280620.07449995},{v:4282287.00650002}]},
    {c:[{v:"Dez"},{v:4520620.07449995},{v:9267387.00650002}]}]
    });

    var formatter = new google.visualization.NumberFormat({
        pattern: 'short'
    });

    var formatterP = new google.visualization.NumberFormat({
        pattern: 'percent'
    });

    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        formatter.format(data, i);
    }

    var view = getDataView(data);
    var colors = ["#E8E8E8", "#404040"];
    var maxValCol = maxValue(view)

    function maxValue(view) {
        var maxA = 0;
        for(var i = 0; i < view.getNumberOfColumns(); i++) {
            if(maxA < view.getColumnRange(i).max) {
                maxA = view.getColumnRange(i).max;
            } 
        }
        return maxA;
    }

    var minValCol = minValue(view);

    function minValue(view) {
        var minA = 0;
        for(var i = 0; i < view.getNumberOfColumns(); i++) {
            if(minA >= view.getColumnRange(i).min) {
                minA = view.getColumnRange(i).min;
            } 
        }
        return minA;
    }

    function getDataView(dataTable) {
        var dataView;
        var viewColumns = [];

        for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
            addViewColumn(i);
        }

        function addViewColumn(index) {
            viewColumns.push(index);
            if (index == (dataTable.getNumberOfColumns() - 1)) {
                viewColumns.push({
                    calc: function(data, row) {
                        var value = 0;
                        value = (data.getValue(row, 2) - data.getValue(row, 1)) / data.getValue(row, 1);
                        return {
                            v: value,
                            f: formatterP.formatValue(value)
                            }
                        },
                    type: "number",
                });
                viewColumns.push({
                    calc: function(data, row) {
                        var value = 0;
                        value = (data.getValue(row, 2) - data.getValue(row, 1)) / data.getValue(row, 1);
                        return {
                            v: value,
                            f: formatterP.formatValue(value)
                        }
                    },
                    type: "number",
                    role: "annotation"
                });
            }
        }

        dataView = new google.visualization.DataView(dataTable);
        dataView.setColumns(viewColumns);
        return dataView;
    }

    var options = {
        annotations: {
            alwaysOutside: true,
            textStyle: {
                fontSize: 10,
                color: 'black',
            }
        },
        height: 600,
        width: 900,
        colors: colors,
        chartArea: {
            height: "85%",
            width: "100%",
            left: "5%",
            top: "5%"
        },
        vAxis: {
            gridlines: {
                color: 'transparent'
            },
            viewWindow: "maximized",
            textPosition: "none",
        },
        legend: {
            position: 'top',
            alignment: "center",
            maxLines: 3
        },
        bar: {
            groupWidth: '70%'
        },
        seriesType: 'bars',
        series: {
            1: {
                targetAxisIndex: 1
            },
            2: {
                targetAxisIndex: 2,
                type: 'line',
                color: 'red',
            }
        },      
    };

    var chart = new google.visualization.ComboChart(document.getElementById("absoluteValues"));
    chart.draw(view, options);