5

我正在使用谷歌图表来显示两件事的柱形图：

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

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

4

2 回答 2

4

要达到预期的结果，请使用以下使用角色的选项，并为成功提供绿色，为失败提供红色

{“角色”：“风格”，“类型”：“字符串”}

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

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

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

于 2018-04-20T14:35:41.407 回答
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}])
     }
   };

此链接中给出了代码。

于 2018-04-27T09:11:59.080 回答