Monaca / Onsen 2.0 - 图表库在 <ons-navigator> 中不工作（SVG 和 Canvas）

Question

所以我遵循了本教程：https://onsen.io/blog/charts-angularjs-hybrid-app-nvd3/ 但我无法通过调试器在模拟器或设备上呈现图表。我试过 Charts.JS 和 NVD3 都没有成功。对于这个问题，我正在尝试 NVD3。我的代码如下：

Index.html - 头部：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<script src="lib/js/D3_Chart.js"></script>

Index.html - 正文：

<ons-template id="gameon.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Game On!</div>
        </ons-toolbar> 
        <ons-navigator id="gameNavigator">
            <ons-page>
                <ons-list modifier="inset">
                    <ons-list-item modifier="chevron">Page 1</ons-list-item>
                    <ons-list-item modifier="chevron">Page 2</ons-list-item>
                </ons-list>                    
                <ons-button>Above Chart</ons-button>
                <div id='chart2'>
                    <svg> </svg>
                </div>
                <ons-button>Below Chart</ons-button>
            </ons-page>
        </ons-navigator>
    </ons-page>
</ons-template>

D3_Chart.js:

  nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
      ;

    d3.select("#chart2 svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
  return  [
      { 
        "label": "One",
        "value" : 29.765957771107
      } , 
      { 
        "label": "Two",
        "value" : 0
      } , 
      { 
        "label": "Three",
        "value" : 32.807804682612
      } , 
      { 
        "label": "Four",
        "value" : 196.45946739256
      } , 
      { 
        "label": "Five",
        "value" : 0.19434030906893
      } , 
      { 
        "label": "Six",
        "value" : 98.079782601442
      } , 
      { 
        "label": "Seven",
        "value" : 13.925743130903
      } , 
      { 
        "label": "Eight",
        "value" : 5.1387322875705
      }
    ];
}

我在数据上尝试了不同的语法，因为示例有几种不同的形式，但都不会生成图表。我没有使用 AngularJS.

我已确认此代码在 Chrome 和 Android 上的默认浏览器中有效，但在 Monaca 上无效。此外，我担心域问题，所以我也尝试将引用的 JS 和 CSS 文件下载并添加到项目中。没有生成错误，只是图表没有显示。

编辑：已更新以明确显示 <ons> 标签，如下所述。关键是，代码在 Chrome 和 Android 浏览器中运行良好（我假设也是 iOS，只是无法访问测试。）但它无法在摩纳卡/温泉 2.0 项目。代码来自温泉博客，这让我想知道2.0是否破坏了这个功能。

回答：正如我在下面的评论中 post 所说，问题不在于 Onsen，而是 how/when 对象被添加到 DOM。 post 提供了细节：

Answer 1

我发现这是另一个 post:

document.addEventListener("init", function(event) {
  if (event.target.id == "my-page") {
    document.getElementById("my-switch").addEventListener('change', function(e) {
      console.log('click', e);
    });
  }
}, false);

Monaca / Onsen 2.0 - 图表库在 <ons-navigator> 中不工作（SVG 和 Canvas）

Monaca / Onsen 2.0 - Charts libraries not working (SVG and Canvas) in <ons-navigator>

javascript

svg

nvd3.js

onsen-ui

monaca