Question

我正在使用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％的堆叠。

Answer 1

计算将是100％堆积条形图 - （数组的第一个元素/数组的第一个元素的总数）* 100

（数组的第1个元素= 19 /数组的第1个元素的总数= 56）* 100 （数组的第一个元素= 24 /数组的第一个元素的总数= 56）* 100

＆＃13;

    '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;

    });

＆＃13;

<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>

＆＃13;

Answer 2

您需要将chart1.type = "BarChart";更改为chart1.type = "ColumnChart";，以使其垂直。

100％堆积条形图

2 个答案: