顶部填充与Nvd3图表

Question

我的图表使用angular-nvd3时遇到了这个问题，它们是linePlusBarChart并且它们工作正常但如果我将插值更改为cardinal，我会得到一条如截图所示的那条线。

我该如何解决？

我的图表选项：

vm.chartOptions = {
    chart: {
        type: 'linePlusBarChart',
        height: 450,
        margin: {
            top: 0,
            right: 50,
            bottom: 50,
            left: 50
        },
        focusEnable: false,
        duration: 250,
        forceY: [0],
        groupSpacing: 0.5,
        interpolate: 'cardinal',
        xAxis: {
            axisLabel: false,
            showMaxMin: false,
            tickFormat: function(d) {
                return d3.time.format('%b %y')(new Date(d));
            }
        },
        y1Axis: {
            showMaxMin: false,
            tickFormat: function(d) {
                if (d > 0) return '$' + d3.format(',f')(d);
            }
        },
        y2Axis: {
            showMaxMin: false,
            tickFormat: function(d) {
                if (d > 0) return d3.format(',f')(d);
            }
        }
    }
};

Answer 1

我解决了它使用forceY参数操作Y轴：

var values = [1, 2, 3, 4], // the chart values this is only for example
    maxY = 0,
    forceY = [0];

if (values && values.length) {
    maxY = _.max(values, function(o) {
        return o.y;
    });
}
if (maxY && maxY.y) {
    forceY = [0, (maxY.y * 15 / 100) + maxY.y];
}

然后只需将参数forceY: forceY添加到图表

即可