为什么我的条形图不显示（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演示这个。