Angular NVD3：在stackedAreaChart

Question

我正在使用：

• Angular v.1.3
• Angular-nvd3 v.1.0.5
• D3 v.3.5.16

我尝试在Y轴添加 Stacket Area Chart 并使用特定域名，我对结果感到高兴，因为yDomain和图表正在运行，但是我有一个我想要解决的设计问题......

Y轴没有域：

工作正常，没有任何问题，但不完全是我想要的：

Y轴中的域

在最后一种情况下，我现在在Y轴添加了一个域：

 var maxValue, minValue, margin;

 maxValue = Math.max.apply(Math,data[0].values.map(function(o){return o[1];}));
 minValue = Math.min.apply(Math,data[0].values.map(function(o){return o[1];}));
 margin = 0.1 * (maxValue - minValue);
 options.chart.yDomain = [minValue, maxValue+margin];

现在正是我想要的！我添加了一个域名...但我不明白为什么 X轴和图表不足 ......

如何解决此设计问题？为什么会这样？

谢谢！

图表属性：

"chart": {
    "type": "stackedAreaChart",
    "height": 450,
    "margin": {
      "top": 20,
      "right": 20,
      "bottom": 20,
      "left": 40
    },
    "x": function (d) {
      return d[0];
    },
    "y": function (d) {
      return d[1];
    },
    "useVoronoi": false,
    "clipEdge": true,
    "showControls": false,
    "duration": 100,
    "useInteractiveGuideline": true,
    "xAxis": {
      "tickFormat": function (d) {
        return d3.time.format("%H:%M")(new Date(d));
      }
    },
    "yAxis": {
      "tickFormat": function (d) {
        return d3.format(",.2f")(d);
      },
    },
    "zoom": {
      "enabled": false,
      "scaleExtent": [1, 10],
      "useFixedDomain": true,
      "useNiceScale": false,
      "horizontalOff": true,
      "verticalOff": true,
      "unzoomEventType": "dblclick.zoom"
    }
  }

Answer 1

最后，我解决了这个问题，将图表类型从 stackedAreaChart 更改为 lineChart 。

"chart": {
    "type": "lineChart",
    // ... All the other options are the same

之后，我们需要做的唯一更改是在数据对象中添加area:true，我们获得相同的图表并解决了此错误

data = [{
          color:"#e35b5a",
          key:"A",
          values:values,
          area: true //Add this line in the data object
       }];

<强>结果：