爲什麼我的條形圖不顯示（Chart.js）？

Question

我試圖在單擊任意下拉列表選項時在id =「myChart」的HTML元素中繪製條形圖。我必須根據數組輸入繪製我的x和y軸數據。控制檯顯示沒有錯，但沒有顯示圖形。我的下拉列表是使用bootstrap3創建的，Chart.js版本爲2的圖表

現在請假設無論用戶點擊哪個droplist選項，都會繪製相同的條形圖。我只是不知道爲什麼條形圖不顯示。

當前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應用在一個單獨的鏈接按鈕，而不是droplist選項如下所示。當鏈接按鈕

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

這裏的onclick就是爲什麼它不工作

JavaScript代碼。由於您正在向下拉菜單動態添加元素，因此只有在完成後才能附加您的點擊事件。

在您當前的代碼中，您將綁定到所有下拉元素的點擊處理程序（但還沒有存在...或者即使存在某些元素，您在稍後將它們清除，然後再添加新元素） 。只要您刪除這些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演示這個。