Javascript Chart.js基于从数组中选择的下拉列表打印数据

我根据下面显示的数据制作了一个图表，数据显示了自行车站基于特定时间的租赁数量，整个想法是让图表根据我们从下拉列表中选择的内容做出响应，该列表允许选择特定时间。下拉列表包含一个小时列表：从0表示上午12点到23表示下午11点，现在如果用户选择例如16，并且相同的小时将存在于从rentalsStationsTotal开始的startHour列中，图表将仅显示16小时表示下午4点的租金

问题是，使用charts.js实现这一点的最佳方法是什么？更新图表的函数位于名为updateChart的代码末尾，但当从下拉列表中选择某个内容时，图表根本不会改变

<div class="container" style="width: 640px; height: 400px;">
<h2>Chart</h2>
<div>
   <form id="myForm">
      <select id="selectNumber">
      <option>Choose an hour</option>
      </select>
   </form>
   <canvas id="canvas3"></canvas>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

<script>
var userRentals = [{"Rentals": 12377, "StartHour": 0}, {"Rentals": 7047, "StartHour": 1}, {"Rentals": 4102, "StartHour": 2}, {"Rentals": 2681, "StartHour": 3}
var rentalsStationsTotal = [{"Rentals": 1, "Name": "Aleja Bielany", "StartHour": 0}, {"Rentals": 4, "Name": "Aleja Bielany", "StartHour": 1}, {"Rentals": 1, "Name": "Aleja Bielany", "StartHour": 3}]

var userRentalsHours = [];
var stationRentalsLabels = [];
var stationRentalsData = [];

for (var i = 0; i < userRentals.length; i++) {
userRentalsHours.push(userRentals[i].StartHour);  
}
for (var i = 0; i < rentalsStationsTotal.length; i++) {
stationRentalsLabels.push(rentalsStationsTotal[i].Name);  
}
for (var i = 0; i < rentalsStationsTotal.length; i++) {
stationRentalsData.push(rentalsStationsTotal[i].Rentals);  
}

var ctx3 = document.getElementById("canvas3").getContext("2d");

var canvas3 = new Chart(ctx3, {
        type: 'line',
        data: {
        labels : stationRentalsLabels, 
        datasets : [
            {
                label: 'godziny wypożyczeń w stacjach',
                fillColor : "rgba(220,280,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                backgroundColor: "rgba(153,255,51,0.4)",
                data : stationRentalsData
            }]
        }
    });

/* Select Hour from drop down list */

var select = document.getElementById("selectNumber"); 
var options = userRentalsHours; 

for(var i = 0; i < userRentalsHours.length; i++) {
var opt = userRentalsHours[i];
var el = document.createElement("option");
el.text = opt;
el.value = opt;
select.add(el);
}

var currentChart;
var stationRentalsHoursTemp = [];

function updateChart() {
if(currentChart){currentChart.destroy();}

var determineHour = $("#selectNumber").val();
for (var i = 0; i < stationRentalsHours.length; i++) {
if(determineHour == stationRentalsHours[i]){
stationRentalsHoursTemp.push(rentalsHoursInDays[i].Date);  
}
}
var params = canvas3[determineHour]
currentChart = new Chart(ctx3)[params.method](params.data, {});
}
$('#selectNumber').on('change', updateChart)
updateChart();
</script>