Question

我正在使用angular-nvd3的LinePlusBarChart来显示一些数据，非常类似：

http://plnkr.co/edit/mrkvM1ihrVRN9jdBFWiF?p=preview

在上面的示例中，x轴域基于数据的日期值。

x轴的日期间隔如何在linePlusBarChart中更改为从2000年开始并持续到2015年，即使2000年和2004年之间没有可用数据？

更新：对于普通的lineChart，设置chart.xDomain = [minDate, maxDate]工作正常。该图表正确显示数据，图表x轴从2000年开始到2015年结束。通过在 linePlusBarChart 中使用chart.lines.xDomain = [minDate, maxDate]和chart.bars.xDomain = [minDate, maxDate]，图表的数据是也正确显示，但x轴没有反映更改的最小和最大日期。这是显示错误的图像：

图表选项如下所示：

 chart: {
            type: 'linePlusBarChart',
            height: 300,
            margin: {
                top: 30,
                right: 75,
                bottom: 50,
                left: 75
            },
            bars: {
                forceY: [0]
            },
            color: ['#2ca02c', 'darkred'],
            x: function(d,i) { return i },
            xAxis: {
                axisLabel: 'X Axis',
                tickFormat: function(d) {
                    var dx = $scope.data[0].values[d] && $scope.data[0].values[d].x || 0;
                    if (dx > 0) {
                        return d3.time.format('%x')(new Date(dx))
                    }
                    return null;
                }
            },
            y1Axis: {
                tickFormat: function(d){
                    return d3.format(',f')(d);
                }
            },
            y2Axis: {
                tickFormat: function(d) {
                    return '$' + d3.format(',.2f')(d)
                }
            },
            focusEnable: false
        }

Answer 1

我发现问题位于nvd3库中。 xDomain功能中从未尊重nv.models.linePlusBarChart。我必须通过添加以下行将xDomain拉入chart._options：

xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},

然后我将xDomain变量添加到域方法中了一点：

x2 .domain(xDomain || d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))

我还必须在函数的开头添加xDomain作为公共变量。

现在x轴刻度标签随数据一起更改。

LinePlusBarChart，域外的日期间隔

1 个答案: