Почему моя гистограмма не отображается (Chart.js)?

Question

Я пытаюсь построить гистограмму в элементе HTML с id="myChart", нажав на любой из параметров раскрывающегося списка. Я должен построить свои данные по осям X и Y на основе входных данных массива. Консоль показывает, что все в порядке, но график не отображается. Мой дроплист создается с помощью bootstrap3, диаграмма с Chart.js версии 2

Пожалуйста, пока предположите, что одна и та же гистограмма будет построена независимо от того, на какой вариант выпадающего списка нажимает пользователь. Я просто не знаю, почему гистограмма не отображается.

Текущий HTML-код

            <div class="dropdown">
                <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Retrieve Graph for Event 
                <span class="caret"></span></button>
                <ul class="dropdown-menu" id="generatedroplist">                      

                </ul>
            </div>
            <div>
                <canvas id="myChart" width="1" height="1"></canvas> 
            </div>

Текущий код Javascript

    //====== GENERATE DROPDOWN WITH BOOTSTRAP ========================
    var edonebutton = document.getElementById("eventdonebutton");
    edonebutton.onclick = function generatedroplist() {

    $('#generatedroplist').empty();                             

    var list = document.getElementById("generatedroplist");  //when click done button then populate
        for (var h = 1; h < numberOfEvents + 1; h++){                
            var opt = "Event " + h;         
            var li = document.createElement("li");
            var link = document.createElement("a");             
            var text = document.createTextNode(opt);
            link.appendChild(text);
            //link.href = "#";
            li.appendChild(link);
            list.appendChild(li);
          }

}
      //========= CREATE BAR CHART ON CLICK OF ANY OPTION ================
            var xaxisarr = []; //global array
            var yaxisarr = []; //global array

            $('#generatedroplist li').on('click', function getgraph(){     

            xaxisarr = doublearrx[1];       //value in double array based on drop down list
            yaxisarr = doublearry[1];                               

            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: xaxisarr,
                    datasets: [{
                        label: 'Workload Value',
                        data: yaxisarr,
                        backgroundColor: 
                            'rgba(244, 81, 30, 0.5)',  //change transparency here

                        borderColor: 
                            'rgba(244, 81, 30, 0.5)',

                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });

        }); 

Диаграмма будет хорошо отображаться, если я применю onclick к отдельной кнопке ссылки вместо опции раскрывающегося списка, как показано ниже.

Javascript код при нажатии кнопки ссылки

    var xaxisarr = []; //global array
    var yaxisarr = [];

    var retrievegraph = document.getElementById("retrievegraph"); 

        retrievegraph.onclick = function getgraph() {

                xaxisarr = doublearrx[1]; 
                yaxisarr = doublearry[1];

                var ctx = document.getElementById("myChart");
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: xaxisarr,
                        datasets: [{
                            label: 'Workload Value',
                            data: yaxisarr,
                            backgroundColor: 
                                'rgba(244, 81, 30, 0.5)',  //change transparency here

                            borderColor: 
                                'rgba(244, 81, 30, 0.5)',

                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });

        }

Answer 1

Вот почему это не работает. Поскольку вы динамически добавляете элементы в выпадающий список, вы должны прикрепить событие click только после его завершения.

В своем текущем коде вы привязываете обработчик кликов ко всем выпадающим элементам (но их еще нет... или даже если некоторые существуют, вы позже очищаете их, когда делаете $('#generatedroplist').empty() а потом добавляем новые). Как только вы удалите эти элементы DOM, ранее связанный обработчик больше не будет работать.

Решение довольно простое. Просто оберните свою функцию привязки раскрывающегося клика внутри другой функции, которую вы можете вызвать после динамического создания элементов раскрывающегося списка.

var edonebutton = document.getElementById("eventdonebutton");

edonebutton.onclick = function generatedroplist() {
  $('#generatedroplist').empty();

  var list = document.getElementById("generatedroplist"); //when click done button then populate
  for (var h = 1; h < numberOfEvents + 1; h++) {
    var opt = "Event " + h;
    var li = document.createElement("li");
    var link = document.createElement("a");
    var text = document.createTextNode(opt);
    link.appendChild(text);
    link.href = "#";
    li.appendChild(link);
    list.appendChild(li);
  }

  bindClickEvent();
};

var bindClickEvent = function() {
  $('#generatedroplist li').click(function(e) {
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Workload Value',
          data: data,
          backgroundColor: 'rgba(244, 81, 30, 0.5)',
            //change transparency here
          borderColor: 'rgba(244, 81, 30, 0.5)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  });
}

Вот кодекс, демонстрирующий это.