javascript - 为什么我的条形图不显示(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

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

在您当前的代码中，您将点击处理程序绑定(bind)到所有下拉元素(但尚不存在......或者即使某些确实存在，您稍后在执行 $('# generatedroplist 时会清除它们) ').empty() 然后添加新的)。一旦删除这些 DOM 元素，之前绑定(bind)的处理程序将不再起作用。

解决方案非常简单。只需将下拉点击绑定(bind)函数包装在另一个函数中，您可以在动态创建下拉项后调用该函数。

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证明了这一点。