如何更改柱形图中的条形颜色和图例答案

【问题标题】：How to change bar color and legends in ColumnChart如何更改柱形图中的条形颜色和图例
【发布时间】：2018-04-27 17:35:27
【问题描述】：

我使用Google Chart 来显示Column Chart 两件事：

1) 成功

2) 失败

为了成功：颜色 = 绿色

对于失败：颜色 = 红色

但问题是 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 个图例（成功 - 绿色和失败 - 红色）

我将不胜感激任何帮助:)

【问题讨论】：

标签： javascript angularjs column-chart

【解决方案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"}] }] 
                 } } };

legend 的问题是它默认将 label:"values" 作为图例，自定义的一种方法是制作 legend: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 中添加图例 :none 到图表选项

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

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

【讨论】：

这很好，并为您为帮助我所做的努力而投票，但传奇仍然存在问题。是否可以显示成功和失败等传奇而不是价值观？
@User，更新了我的答案和codepen，图例默认使用列标签，在这种情况下“值”，一个选项是自定义图例
当我将鼠标悬停在成功栏上时，它在栏上显示为成功/失败
@User，为了测试图例，我已将标签值更改为成功/失败，我已更新 codepen，希望它现在可以工作 :)

【解决方案2】：

您可以使用谷歌图表的setSelection方法将鼠标悬停在图例中来实现数据图选择功能。要使用此方法，首先在 agc-on-ready 指令上获取图表实例。然后将鼠标悬停在图例的处理程序上，调用图表实例的 setSelection 方法。

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

代码在这个link中给出。

【讨论】：