我对此高图表有问题。我使用Laravel作为我的框架。我的问题是这样的：我有一个按钮，它有一个点击事件来获取我的数据并将其绘制在高图表中。现在我的第一个问题是：当我单击按钮时，图表将出现，而我的数据不会显示，当我再次按下按钮时，我的数据显示。确切地说，我的问题是：我需要双击按钮以显示来自高图表的数据，每当我点击三次时，我在高图表中的数据就会重复。
这是我的代码：
<button class="btn btn-danger form-control" onclick="aw();"><i class="fa fa-bar-chart" ></i> View</button>
Javascript代码：
function aw(){
strat = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
dend = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');
sec = $('#repsec').val();
diff(strat,dend);
}
function diff(from, to) {
var datFrom = new Date(from);
var datTo = new Date(to);
var fromYear = datFrom.getFullYear();
var toYear = datTo.getFullYear();
var diffYear = (12 * (toYear - fromYear)) + datTo.getMonth();
for (var i = datFrom.getMonth(); i <= diffYear; i++) {
arr.push(monthNames[i%12] + " " + Math.floor(fromYear+(i/12)));
$.ajax({
url: "{{ url('user/get-report') }}/" +sec+"/"+strat+"/"+dend+"/"+monthNames[i%12]+"/"+Math.floor(fromYear+(i/12)),
type: "GET",
dataType: "JSON",
success: function(data) {
if (data[0]['data'].length>0){
for(i=0; i<data[0]['data'].length; i++){
datas.push(data[0]['data'][0].count);
}
}
else{
datas.push(0);
}
if (data[1]['data2'].length>0){
for(i=0; i<data[1]['data2'].length; i++){
datas2.push(data[1]['data2'][0].count);
}
}
else{
datas2.push(0);
}
if (data[2]['data3'].length>0){
for(i=0; i<data[2]['data3'].length; i++){
datas3.push(data[2]['data3'][0].count);
}
}
else{
datas3.push(0);
}
}
});
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Attendance Report'
},
subtitle: {
text: ''
},
xAxis: {
categories:arr,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'No of students'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} student(s)</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Present',
data:datas
}
, {
name: 'Absent',
data: datas2
}, {
name: 'Late',
data: datas3
}
]
});
$('#report').show();
}
看起来您正在渲染图表，然后您的 Ajax 调用完成。在 ajax 调用完成后调用图表函数应该可以解决问题。
您似乎在for-loop中触发了多个 AJAX 调用，因此您必须等待所有调用完成才能呈现图表。
function aw() {
strat = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
dend = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');
sec = $('#repsec').val();
diff(strat, dend);
}
function diff(from, to) {
var datFrom = new Date(from);
var datTo = new Date(to);
var fromYear = datFrom.getFullYear();
var toYear = datTo.getFullYear();
var diffYear = (12 * (toYear - fromYear)) + datTo.getMonth();
// Keep a count of the number of expected Ajax Calls
var count = diffYear - datFrom.getMonth();
function renderIfReady() {
if (--count > 0) {
// There are still pending AJAX calls, return early
return;
}
// All calls complete. Render Chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Attendance Report'
},
subtitle: {
text: ''
},
xAxis: {
categories: arr,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'No of students'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} student(s)</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Present',
data: datas
}, {
name: 'Absent',
data: datas2
}, {
name: 'Late',
data: datas3
}]
});
}
for (var i = datFrom.getMonth(); i <= diffYear; i++) {
arr.push(monthNames[i % 12] + " " + Math.floor(fromYear + (i / 12)));
$.ajax({
url: "{{ url('user/get-report') }}/" + sec + "/" + strat + "/" + dend + "/" + monthNames[i % 12] + "/" + Math.floor(fromYear + (i / 12)),
type: "GET",
dataType: "JSON",
success: function(data) {
if (data[0]['data'].length > 0) {
for (i = 0; i < data[0]['data'].length; i++) {
datas.push(data[0]['data'][0].count);
}
} else {
datas.push(0);
}
if (data[1]['data2'].length > 0) {
for (i = 0; i < data[1]['data2'].length; i++) {
datas2.push(data[1]['data2'][0].count);
}
} else {
datas2.push(0);
}
if (data[2]['data3'].length > 0) {
for (i = 0; i < data[2]['data3'].length; i++) {
datas3.push(data[2]['data3'][0].count);
}
} else {
datas3.push(0);
}
renderIfReady();
}
});
}
$('#report').show();
}每次单击查看按钮时，您都会将数据推送到datas，datas2和datas3等数组中。
解决方案是在单击函数时使数组为空
function diff(from, to) {
var datas=[];
var datas2=[];
var datas3=[]
//Your code here
}