angularjs Angular-Google-Area-Chart图表背景颜色重叠

doinxwow 于 11个月前发布在 Angular

关注(0)|答案(2)|浏览(99)

的数据
我正在使用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"
    }
    .....
]

型

angularjs

来源：https://stackoverflow.com/questions/46463911/angular-google-area-chart-chart-background-color-overlapping

2条答案

按热度按时间

x3naxklr1#

**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);
  }

字符串

赞(0）回复(0）举报 11个月前

r7xajy2e2#

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);
}

个字符

赞(0）回复(0）举报 11个月前

我来回答

angularjs Angular-Google-Area-Chart图表背景颜色重叠

2条答案

相关问题

热门标签

最新问答