为什么我的条形图不显示(图表.js)

Question

我正在尝试在 html 元素中使用 id="myChart" 绘制条形图，单击任何下拉列表选项。我必须根据数组输入绘制我的 x 轴和 y 轴数据。控制台显示没有任何错误，但不显示图形。我的下拉列表是用 bootstrap3 创建的，图表是用图表创建的.js版本 2

现在请假设无论用户单击哪个下拉列表选项，都将绘制相同的条形图。我只是不知道为什么条形图不显示。

当前网页代码

            <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
                            }
                        }]
                    }
                }
            });
        }); 

如果我应用单独的链接按钮而不是如下所示的下拉列表选项，图表绘制得很好。

单击链接按钮时的 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

这就是它不起作用的原因。 由于您要动态地向下拉列表添加元素，因此只有在完成此操作后才能附加点击事件。

在当前代码中，您将单击处理程序绑定到所有下拉元素(但尚不存在...或者即使确实存在一些，您稍后也会在执行$('#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
            }
          }]
        }
      }
    });
  });
}

这是一个代码笔来演示这一点。