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

Question

我使用谷歌图显示列图用于2件事：

1)成功

2)失败

成功:颜色=绿色 表示失败: 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>

​

我想要成功栏为绿色，失败为红色，我还想要两个传奇(成功-Green和失败-红色)

(如有任何帮助，我将不胜感激:)

Answer 1

要达到预期效果，请使用下面的“使用角色”选项，并将颜色为绿色表示成功，红色为失败。

{“角色”：“样式”，“类型”：“字符串”}

  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"}] }] 
                 } } };

图例的问题是，默认情况下它将标签：“value”作为图例，而定制的一种方法是创建图例:none并使用以下代码进行自定义

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中添加图例:无图表选项

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

更新的代码示例以供参考- https://codepen.io/nagasai/pen/qYdpaE

Answer 2

使用谷歌图的setSelection方法，可以实现图例中鼠标对数据图的选择功能。要使用此方法，首先要在agc就绪指令上获取图表实例.然后在鼠标对图例处理程序上，调用图表实例的setSelection方法。

 $scope.highLight = function(arg){
     if(arg == "red"){
    ChartInstance.setSelection([{row:1,column:1}])
     }
     if(arg=="green"){
       ChartInstance.setSelection([{row:0,column:1}])
     }
   };

在这个链接中给出了代码。