当所有值都等于零时,Nvd3 Multibarchart forceY选项不起作用

时间:2017-01-23 17:45:11

标签: angularjs nvd3.js

我写信是为了问你为什么Y轴从-1.0开始时所有值都等于零,尽管我已经将选项forceY设置为0.我怎么能解决这个问题。

请附上摘要:example

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
$scope.options = {
        chart: {
            type: 'multiBarChart',
            height: 450,
            forceY:[0],
            margin : {
                top: 20,
                right: 20,
                bottom: 45,
                left: 45
            },
            clipEdge: true,
            duration: 500,
            stacked: true,
            xAxis: {

                axisLabel: 'Time (ms)',
                showMaxMin: false,
                tickFormat: function(d){
                    return d3.format(',f')(d);
                }
                ,ordered:'bottom'
            },
            yAxis: {

                axisLabel: 'Y Axis',
                axisLabelDistance: -20,
                tickFormat: function(d){
                    return d3.format(',.1f')(d);
                }

            }
        }
    };

    $scope.data = [{"key":"2016","values":[{"x":"Gennaio","y":0,"color":"blue"},{"x":"Febbraio","y":0,"color":"#FFFFFF"},{"x":"Marzo","y":0,"color":"#FFFFFF"},{"x":"Aprile","y":0,"color":"#FFFFFF"},{"x":"Maggio","y":0,"color":"#FFFFFF"},{"x":"Giugno","y":0,"color":"#FFFFFF"},{"x":"Luglio","y":0,"color":"#FFFFFF"},{"x":"Agosto","y":0,"color":"#FFFFFF"},{"x":"Settembre","y":0,"color":"#FFFFFF"},{"x":"Ottobre","y":0,"color":"#FFFFFF"},{"x":"Novembre","y":0,"color":"#FFFFFF"},{"x":"Dicembre","y":0,"color":"#FFFFFF"}]},{"key":"2017","values":[{"x":"Gennaio","y":0,"color":"#FF9896"},{"x":"Febbraio","y":0,"color":"#FF9896"},{"x":"Marzo","y":0,"color":"#FF9896"},{"x":"Aprile","y":0,"color":"#FF9896"},{"x":"Maggio","y":0,"color":"#FF9896"},{"x":"Giugno","y":0,"color":"#FF9896"},{"x":"Luglio","y":0,"color":"#FF9896"},{"x":"Agosto","y":0,"color":"#FF9896"},{"x":"Settembre","y":0,"color":"#FF9896"},{"x":"Ottobre","y":0,"color":"#FF9896"},{"x":"Novembre","y":0,"color":"#FF9896"},{"x":"Dicembre","y":0,"color":"#FF9896"}]}];

});

2 个答案:

答案 0 :(得分:0)

也许这是nvd3 angularjs库(https://krispo.github.io/angular-nvd3/)的错误。 您尝试将属性forceY设置为1值。

答案 1 :(得分:0)

此处的密钥为yDomain1:[0,100]

chart: {
                type: 'multiChart',
                height: 600,
                margin: {
                    top: 0,
                    right: 20,
                    bottom: 120,
                    left: 45
                },
                x: function (d) {
                    if (d) {
                        return d.x;
                    }
                },
                y: function (d) {
                    if (d) {
                        return d.y;
                    }
                },
                clipEdge: true,
                showControls: false,
                bars1: {
                },
                lines1: {
                    interactive: false,
                },
                staggerLabels: false,
                transitionDuration: 1000,
                stacked: false,
                reduceXTicks: false,
                xAxis: {
                    ticks: 11,
                    showMaxMin: false,
                    rotateLabels: 70,
                    tickFormat: function (d) {
                        if (d) {
                            var serializedString = d.toString();
                            var monthString = moment().month(Number(serializedString.substring(4)) - 1).format("MMM");
                            var yearString = serializedString.substring(0, 4);
                            return monthString + ", " + yearString;
                        }
                    },
                },
                yDomain1: [-10, 100],
                yAxis1: {
                    axisLabel: '% Values',
                    axisLabelDistance: 100,

                }
            }
        }