Monaca / Onsen 2.0 - Не работают библиотеки диаграмм (SVG и Canvas) в ‹ons-navigator›

Поэтому я следовал этому руководству: 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 тоже, просто нет доступа для тестирования), но он не выполняется в проекте Monaca/Onsen 2.0. Код взят из блога Onsen, что заставляет меня задаться вопросом, нарушает ли 2.0 эту функциональность.

Ответ: Как я написал в комментарии ниже, проблема не в Onsen, а в том, как/когда объекты добавляются в DOM. Этот пост содержит подробности: Onsen 2.0 — Добавление прослушиватель событий для Ons-Switch с Javascript


javascript svg monaca onsen-ui nvd3.js
person Munsterlander    schedule 01.02.2016    source источник
comment
Вы вообще используете onsen-ui, я не вижу никаких ons-тегов.   -  person Patrick Klitzke    schedule 02.02.2016
comment
Обновлен вопрос, чтобы показать вам теги.   -  person Munsterlander    schedule 02.02.2016
comment
У меня это работает на телефоне, я сделал это в codepen: codepen.io/anon/pen/yeqMEJ< /а>. После этого я сделал проект и использовал загрузку monaca, и я смог увидеть его на своих телефонах Android, может быть, у вас есть старый телефон Android, который не поддерживает svg?   -  person Patrick Klitzke    schedule 02.02.2016
comment
Новый телефон - Galaxy S6. Я скопировал ваш код, и теперь он работает. У меня, должно быть, было что-то не так, хотя я скопировал из Monaca IDE в stackoverflow. Я попытался поместить svg под ‹ons-list›, который находится в ‹ons-navigator›, и это приводит к тому, что он переходит на боковую страницу, которую нельзя полностью перелистнуть, если это имеет смысл. Несмотря ни на что, теперь это работает! Спасибо!   -  person Munsterlander    schedule 02.02.2016
comment
Спасибо за ответ. Я только что узнал, что шаблоны не загружаются, как я думал. Фрэн Диос разместил здесь: stackoverflow.com/questions/35123385/ Ответ на другую проблему, но они имеют одну и ту же основную причину. Спасибо еще раз!   -  person Munsterlander    schedule 02.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел это еще один пост:

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