javascript - 为什么我的 angular-nvd3 multiChat 图表没有在这里呈现？

Question

工作原始 Plunkr： http ://plnkr.co/edit/nHSMF2?p=preview

我的分叉 Plunkr： http ://plnkr.co/edit/4Ecqif?p=preview

我正在使用Angular-nvd3图表库。这是他们原始的 multiChart 示例，其中包含多个折线图和面积图。正如您在顶部链接中看到的那样，我将它分叉并将图表减少到只有 3 个（2 个区域，1 条线）。

在他们最初的例子中，他们使用一个函数来随机生成数据点，在我定制的 fork 中，我删除了该函数并硬编码了图形对象。我没有看到任何错误，所以不确定为什么我的图表没有被渲染。

有什么想法吗？

我在这个损坏的 Plunkr中使用的硬编码图形对象：

vs.area1 = {
  key: 'Area1',
  color: '#7DD0FA',
  type: 'area',
  values: [
    {
      key: "Area1",
      index: 0,
      series: 0,
      x: 0,
      y: 0.1562513777302181
    },
    {
      key: "Area1",
      index: 1,
      series: 0,
      x: 1,
      y: 0.11389363298669228
    },
    {
      key: "Area1",
      index: 2,
      series: 0,
      x: 2,
      y: 0.15284344328948302
    }
  ]
}

vs.area2 = {
  key: 'Area2',
  color: '#FDE18D',
  type: 'area',
  values: [
    {
      key: "Area2",
      index: 0,
      series: 0,
      x: 0,
      y: 0.3968682840613851
    },
    {
      key: "Area2",
      index: 1,
      series: 0,
      x: 1,
      y: 1.090475660012667
    },
    {
      key: "Area2",
      index: 2,
      series: 1,
      x: 2,
      y: 2.5868011025351163
    }
  ]
}

vs.line1 = {
  key: 'Line1',
  color: '#4C73FF',
  type: 'line',
  values: [
    {
      series: 0,
      x: 0,
      y: 0.10572488375599604
    },
    {
      series: 0,
      x: 1,
      y: 0.10572488375599604
    },
    {
      series: 0,
      x: 2,
      y: 0.11166720592377402
    }
  ]
}

var myData = [];
    myData.push(vs.area1);
    myData.push(vs.area2);
    myData.push(vs.line1);

vs.data = generateData();
// vs.data = myData;
console.log('vs.data',vs.data);

我检查了我的数据并仔细地将其与动态数据进行了比较。并匹配它的关键，但我的图表仍然没有显示:(

左边是我的硬编码版本 | 右边是工作动态数据：

Answer 1

我丢失了yAxis对象中的钥匙，这就是丢失的魔法：

http://plnkr.co/edit/9HdNop?p=preview

vs.area1 = {
  key: 'Area1', yAxis: 1, color: '#7DD0FA', type: 'area',
  values: [...

vs.area2 = {
  key: 'Area2', yAxis: 1, color: '#FDE18D', type: 'area',
  values: [...

vs.line1 = {
  key: 'Line1',
  yAxis: 2,
  ...