Javascript 为什么我的angular-nvd3 multiChat图表不在这里渲染？

工作原稿：KR:

我的叉形弹跳：

我正在玩图表库。这是他们的一些线和面积图。我将其分叉，并将图表缩减为3（2个区域，1条线），正如您在顶部链接中看到的那样

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

有什么想法吗

我在本文件中使用的硬编码图形对象：

我仔细检查了我的数据，并将其与动态数据进行了仔细比较。并逐键匹配，但我的图表仍不显示：(

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

---

我的对象中缺少了

yAxis

键，这就是缺少的魔力：

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);

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,
  ...