100%堆叠条形图
100%堆叠条形图
提问于 2014-12-09 18:24:29
我使用ng-google图表，angularjs绘制堆叠条形图。我需要画100%的堆叠条形图。下面的示例代码是堆叠条形图，但不是100%堆叠。
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) {
var chart1 = {};
chart1.type = "BarChart";
chart1.cssStyle = "height:200px; width:550px;";
chart1.data = {"cols": [
{id: "month", label: "Month", type: "string"},
{id: "laptop-id", label: "Laptop", type: "number"},
{id: "desktop-id", label: "Desktop", type: "number"},
{id: "server-id", label: "Server", type: "number"},
{id: "cost-id", label: "Shipping", type: "number"}
], "rows": [
{c: [
{v: "January"},
{v: (19), f: "42 items"},
{v: (12), f: "Ony 12 items"},
{v: (7), f: "7 servers"},
{v: (4)}
]},
{c: [
{v: "March"},
{v: (24)},
{v: (0)},
{v: (11)},
{v: (6)}
]}
]};
chart1.options = {
"title": "Sales per month",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"hAxis": {
viewWindowMode:'explicit',
"gridlines": {"count": 11},
viewWindow:{
max:100,
min:0
},
format: '#\'%\''
},
};
chart1.formatters = {};
$scope.chart = chart1;
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>
Google Chart Tools AngularJS Directive Example
</title>
</head>
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>
我的问题是，我需要绘制像http://jsfiddle.net/qy6cn/这样的堆叠图，它是100%堆叠的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-11 10:17:07
将计算100 %的叠加条形图-(数组中的第一个单元/第一个数组元素的总数)*100
(阵列第一单元=19/阵列第一单元总数= 56)*100 (阵列第一单元=24/阵列第一单元总数= 56)*100
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) {
var chart1 = {};
chart1.type = "BarChart";
chart1.cssStyle = "height:200px; width:550px;";
chart1.data = {"cols": [
{id: "month", label: "Month", type: "string"},
{id: "laptop-id", label: "Laptop", type: "number"},
{id: "desktop-id", label: "Desktop", type: "number"},
{id: "server-id", label: "Server", type: "number"},
{id: "cost-id", label: "Shipping", type: "number"}
], "rows": [
{c: [
{v: "January"},
{v: (19/56)*100, f: "42 items"},
{v: (12/13)*100, f: "Ony 12 items"},
{v: (7/30)*100, f: "7 servers"},
{v: (4/14)*100}
]},
{c: [
{v: "March"},
{v: (24/56)*100},
{v: (0/13)*100},
{v: (11/30)*100},
{v: (6/14)*100}
]}
]};
chart1.options = {
"title": "Sales per month",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"hAxis": {
viewWindowMode:'explicit',
"gridlines": {"count": 11},
viewWindow:{
max:100,
min:0
},
format: '#\'%\''
},
};
chart1.formatters = {};
$scope.chart = chart1;
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>
Google Chart Tools AngularJS Directive Example
</title>
</head>
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2014-12-14 08:35:32
您需要将chart1.type = "BarChart";更改为chart1.type = "ColumnChart";，以便它是垂直的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27386099
复制相关文章
相似问题
腾讯云开发者
