Javascript 角度谷歌面积图图表背景颜色重叠

我正在使用

angular google chart

创建面积图。我试图为特定区域显示不同的颜色。但您可以看到红色和绿色线（区域）的区域被蓝色区域重叠。 配置有问题吗

"data": {
    "cols": [{
        "id": "date",
        "label": "Date",
        "type": "string",
        "p": {}
    }, {
        "id": 'sd0',
        "label": 'sdo',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1',
        "label": 'sd1',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2',
        "label": 'sd2',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3',
        "label": 'sd3',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1Neg',
        "label": 'sd1Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2Neg',
        "label": 'sd2Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3Neg',
        "label": 'sd3Neg',
        "type": "number",
        "p": {}
    }],
    "rows": $scope.dataMap
},
"options": {
    "isStacked": "false",
    'displayAnnotations': true,
    'legend': {
        'position': 'bottom'
    },

    "fill": 20,
    "displayExactValues": true,
    "vAxis": {
        "title": 'Weight'
    },
    "hAxis": {
        "title": "Age",
        "slantedText": false,
        /* Enable slantedText for horizontal axis */
        // "slantedTextAngle": 90
    },
    'chartArea': {
        'width': '82%',
        'height': '70%',
        'top': '15%',
        'left': '15%',
        'right': '3%',
        'bottom': '30%'
    },
    'pointSize': 2,
    'annotation': {
        'alwaysOutside': true,
        'textStyle': {
            'fontSize': 17,
            'auraColor': '#eee',
            'annotationsWidth': 25,
            'color': '#eee'
        }
    },
    'series': {
        0: { areaOpacity: 1},
        1: { areaOpacity: 1},
        2: { areaOpacity: 1},
        3: { areaOpacity: 1},
        4: { areaOpacity: 1},
        5: { areaOpacity: 1},
        6: { areaOpacity: 1}
    },
    'colors': ['#FF0000','#FF0000','#00FF00','#0000FF','#00FF00','#0000FF','#FFFFFF']
},

在

$scope.dataMap

中，我正在从数组推送数据：

for(var i=0;i<$scope.data.sd0.length;i++){
    $scope.dataMap.push({
        c: [{
            v: $scope.gData.sd0[i].month
        }, {
            v: $scope.gData.sd0[i].value
        }, {
            v: $scope.gData.sd1[i].value
        }, {
            v: $scope.gData.sd2[i].value
        }, {
            v: $scope.gData.sd3[i].value
        }, {
            v: $scope.gData.sd1Neg[i].value
        }, {
            v: $scope.gData.sd2Neg[i].value
        }, {
            v: $scope.gData.sd3Neg[i].value
        }]
    });
}

---

我希望为特定图表区域使用唯一的颜色，上图中绘制的图表顺序为sd3、sd2、sd1、sd0、sd1neg、sd2neg、sd3neg，颜色数组中的颜色代码顺序为

数据

，在代码中定义为sd0、sd1、sd2、sd3、sd1neg、sd2neg、sd3neg。在颜色数组中，有3种颜色，每种颜色使用两次，最后一个是白色——如果你想要独特的颜色，需要使用7种不同的颜色，白色系列会显示吗只是想了解颜色的使用是否是故意的，或者是问题的一部分……我正试图实现这样的目标，突出显示两个特定值之间的区域，根据我在面积图中使用的颜色。你能把代码放到JSFIDLE吗？

"sd0": [
    {
        "month": "0",
        "value": "2.1"
    },
    {
        "month": "1",
        "value": "2.9"
    },
    {
        "month": "2",
        "value": "3.8"
    },
    {
        "month": "3",
        "value": "4.4"
    }
    .....
]