javascript - 顶线填充 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添加到图表