javascript - 如何更改 ColumnChart 中的条形颜色和图例

Question

我正在使用 Google Chart显示Column Chart两件事:

1)成功

2) 失败

For Success : Color = Green

For Failed : Color = Red

但问题是 ColumnChart 总是以蓝色显示栏，而且我想要图例:

Success
Failed

但它将 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' },
        },
    };
});

<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>

我想要成功栏为绿色，失败栏为红色，我还想要 2 个图例(成功 - 绿色和失败 - 红色)

我将不胜感激:)

Answer 1

为了达到预期的结果，使用下面的 using role 选项，成功的颜色为绿色，失败的颜色为红色

{"role": "style", "type": "string"}

  var data = { "data": 
                { "graphResponse": 
                 { "cols": [{ "label": "Types", "type": "string" }, 
                            { "label": "values", "type": "number" },
                            {"role": "style", "type": "string"}], 
                  "rows": [{ "c": [{ "v": "success" }, { "v": 11 },{"v":"green"}] }, 
                           { "c": [{ "v": "failed" }, { "v": 0 },{"v":"red"}] }] 
                 } } };

图例的问题是默认情况下它采用标签:“值”作为图例，一种自定义方法是制作图例:无并使用以下代码进行自定义

HTML:

<div class="legend">
    <div ng-repeat="item in myChartObject.data.rows">
    <div class="{{item.c[2].v}}"></div>{{item.c[0].v}}
    </div>
  </div>

CSS:

 .legend{
  position:absolute;
  right:100px;
  top:30px;
}

.red{
  background:red;
  width:30px;
  height:10px;
  display:inline-block;
}

.green{
  background:green;
  width:30px;
  height:10px;
  display:inline-block;
}

JS:在 JS 中添加 legend :none 到图表选项

$scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
       legend:'none'
    };

更新代码示例以供引用 - https://codepen.io/nagasai/pen/qYdpaE