5

Google チャートを使用して、次の 2 つの縦棒グラフを表示しています。

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