0
我已成功將Flot折線圖和FullCalendar實例整合到我的網站中。它們都在單獨的頁面上（儘管通過AJAX將頁面加載到div中）。FullCalendar和Flot調整大小衝突
我已經添加了Flot Resize插件，並且完美地工作，按預期重新調整線條圖的大小。但是，調整日曆大小時似乎會導致錯誤。
即使我第一次加載日曆頁面，當我調整窗口，我得到這個錯誤在控制檯（同時，在日曆不正確調整大小）：
TypeError: 'undefined' is not an object (evaluating 'r.w=o!==c?o:q.width()')
我掙扎着在哪裏工作錯誤來自於，所以我刪除了Flot Resize JS的鏈接並再次嘗試。當然，折線圖不會調整大小，但在調整日曆大小時，它可以正常工作。
兩個元素的div容器具有不同的名稱，並且調用函數內的resize函數以根據需要繪製折線圖。
我試着將鏈接移動到Flot Resize插件到不同的地方（即fullCalendar JS上面/下面，保存圖的模板），但都無濟於事。
有沒有人有任何想法衝突可能會在哪裏，我可能會解決它？
非常感謝！
編輯：看起來，即使沒有調整窗口的大小，在加載完整日曆頁面後的線圖（flot）頁面也會觸發錯誤....現在我非常困惑！
編輯2：繪製線條圖的代碼。該函數在pageload上調用，並接收從服務器上取下的JSON數據。當圖加載時，我仍然得到關於shutdown（）未定義的錯誤。
function plotLineGraph(theData){
var myData = theData['data'];
var myEvents = theData['events'];
var myDates = theData['dates'];
var events = new Array();
for (var i=0; i<myEvents.length; i++) {
events.push(
{
min: myEvents[i][0],
max: myEvents[i][1],
eventType: "Calendar Entry",
title: myEvents[i][2],
description: myEvents[i][3]
}
);
}
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': 'black',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if ($("#enableTooltip:checked").length == 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if(item.series.label != null){
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
var d1 = [
myData[0], myData[1], myData[2], myData[3], myData[4],
myData[5], myData[6], myData[7], myData[8], myData[9],
myData[10], myData[11], myData[12], myData[13], myData[14],
myData[15], myData[16], myData[17], myData[18], myData[19],
myData[20], myData[21], myData[22], myData[23], myData[24],
myData[25], myData[26], myData[27], myData[28], myData[29]
];
var markings = [
{ color: '#FFBDC1', yaxis: { from: 0, to: 2 } },
{ color: '#F2E2C7', yaxis: { from: 2, to: 3.5 } },
{ color: '#B6F2B7', yaxis: { from: 3.5, to: 5 } }
];
$.plot($("#placeholder"), [
{label: "Average Daily Rating", data: d1, color: "black"}
], {
events: {
data: events,
},
series: {
lines: { show: true },
points: { show: true }
},
legend: { show: true, container: '#legend-holder' },
xaxis: {
ticks:[
myDates[0], myDates[1], myDates[2], myDates[3], myDates[4],
myDates[5], myDates[6], myDates[7], myDates[8], myDates[9],
myDates[10], myDates[11], myDates[12], myDates[13], myDates[14],
myDates[15], myDates[16], myDates[17], myDates[18], myDates[19],
myDates[20], myDates[21], myDates[22], myDates[23], myDates[24],
myDates[25], myDates[26], myDates[27], myDates[28], myDates[29]
],
},
yaxis: {
ticks: 5,
min: 0,
max: 5
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] },
hoverable: true,
clickable: true,
markings: markings
},
selection: {
color: 'white',
mode: 'x'
},
});
$('#placeholder').resize();
$('#placeholder').shutdown();
}
EDIT 3：
日曆稱爲這樣的：
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fullcalendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
clickable: true,
firstDay: 1,
eventSources: [
{
url: '/populate-calendar/{{theProductUuid}}/',
color: 'black',
data: {
text: 'text'
}
}
],
eventClick: function(calEvent, jsEvent, view) {
var startDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
var endDate = $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd');
var eventId = calEvent.uuid;
$('#modal-event-title').text(calEvent.title);
$('#edit-event-name').val(calEvent.title);
$('#edit-start-date').val(startDate);
$('#edit-end-date').val(endDate);
$('#edit-event-text').val(calEvent.text);
$('#edit-event-btn').attr('data-uuid', eventId);
$('#modal-edit-event').on('click', '#delete-btn', function(){
deleteCalendarEvent(eventId);
});
$('#modal-edit-event').modal();
},
});
}
的AJAX來加載包含海軍報圖表的頁面：
function loadDetailedReports(uuid){
$('#product-content').fadeOut('slow', function(){
$('#product-content').empty();
$('#whole-product-sub-nav .active').removeClass('active');
$('#detailed-reports-content').load('/detailed-reports/' + uuid + '/', function(){
$('#detailed-reports-btn').addClass('active');
$('#detailed-reports-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadDetailedReports&' + uuid);
getChartData(uuid);
} else {
setLocationHash('');
}
});
});
});
}
而AJAX來加載包含日曆的頁面：
function loadCalendar(uuid){
$('#detailed-reports-content').empty().hide();
$('#product-content').fadeOut('slow', function(){
$('#whole-product-sub-nav .active').removeClass('active');
$('#product-content').load('/calendar/' + uuid + '/', function(){
$('#calendar-btn').addClass('active');
$('#product-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadCalendar&' + uuid);
} else {
setLocationHash('');
}
showCalendar();
});
});
});
}
調用.resize和.shutdown在那裏，因爲我的印象是，他們需要實現調整大小的功能，並回應您先前關於關機的評論......他們很可能n00b錯誤........？！？！
Flot調整大小包括Ben Alman的jquery-resize插件的內聯副本。這聽起來像是和日曆之間有衝突，因爲我們還沒有收到任何其他產生這種錯誤的調整報告。日曆如何進行大小調整？ – DNS
Automagically ......！ FullCalendar似乎具有內置的調整大小功能。通過JS文件的快速搜索可以發現fullcalendar.js中的windowResize函數 – Erve1879
好的，所以它不使用jquery調整大小或其他任何東西的副本。這個錯誤到底在哪裏？它在flot.js，flot.resize.js或其他地方嗎？什麼行號？ – DNS