如何在ColumnChart中更改条形颜色和图例

ILo*_*low 5 javascript angularjs column-chart

我正在使用谷歌图表显示两个方面的柱形图:

1)成功

2)失败

成功:颜色=绿色

对于失败:颜色=红色

但问题是ColumnChart总是以蓝色显示条形,我也想要传说:

Success
Failed
Run Code Online (Sandbox Code Playgroud)

但它显示Legends为"值",如下所示:在此输入图像描述

代码:

 angular.module("google-chart-sample", ["googlechart"])
.controller("GenericChartCtrl", function ($scope) {
    var data = { "data": { "graphResponse": { "cols": [{ "label": "Types", "type": "string" }, { "label": "values", "type": "number" }], "rows": [{ "c": [{ "v": "success" }, { "v": 11 }] }, { "c": [{ "v": "failed" }, { "v": 0 }] }] } } };
    $scope.myChartObject = {};
    $scope.myChartObject.type = "ColumnChart";
    $scope.myChartObject.data = data.data.graphResponse;
    $scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
    };
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<ul ng-app="google-chart-sample" ng-controller="GenericChartCtrl">
    <div google-chart chart="myChartObject" style="height:600px; width:100%;"></div>
    </ul>
Run Code Online (Sandbox Code Playgroud)

我希望成功栏为绿色,失败为红色,我也想要2个传奇(成功 - 绿色和失败 - 红色)

我会感激任何帮助:)