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

Question

我正在使用

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

是我从发布请求中获取的对象，包含值数组。有 7 个值数组，所有 JSON 结构都相同

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

Answer 1

**HTML**
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <div id="chart_div" style="width: 100%; height: 500px;"></div>


**js**

      google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Answer 2

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div" style="width: 100%; height: 500px;"></div>