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 つの凡例 (成功 - 緑と失敗 - 赤) も必要です。
私はどんな助けにも感謝します:)