棒グラフが表示されないのはなぜですか（Chart.js）？

Question

のdroplistオプションをクリックすると、id = "myChart"のHTML要素に棒グラフをプロットしようとしています。配列の入力に基づいて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を適用した場合。

それは働いていない理由はここにリンクボタンのonclickの

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

はJavascriptコード。ドロップダウンに要素を動的に追加するので、クリックが完了した後にのみクリックイベントをアタッチする必要があります。

クリックハンドラをすべてのドロップダウン要素にバインドしています（ただし、まだ存在しません...またはあるものが存在する場合でも、後で$('#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 
      } 
      }] 
     } 
     } 
    }); 
    }); 
} 

ここにこれを示すcodepenがあります。