Question

点击任意下拉列表选项后，我试图在ID =“myChart”的HTML元素中绘制条形图。我必须根据数组输入绘制我的x和y轴数据。控制台显示没有错误，但没有显示图表。我的droplist是使用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
                            }
                        }]
                    }
                }
            });

        });

如果我在单独的链接按钮而不是droplist选项上应用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来证明这一点。

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

1 个答案: