为什么我的条形图不显示（Chart.js）？

Question

单击 任何 下拉列表选项后，我正在尝试在 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，则图表绘制得很好，如下所示。

点击链接按钮时的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
            }
          }]
        }
      }
    });
  });
}

这是一个 codepen 的演示。