Angular-google-area-chart图表背景颜色重叠

时间:2017-09-28 07:59:47

标签: javascript css angularjs google-visualization google-chartwrapper

enter image description here

我正在使用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
        }]
    });
}

$scope.gData是我从post请求获得的对象,包含值数组。有7个值数组,JSON结构对于所有

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

0 个答案:

没有答案