问题
I am making a dashboard in a Sharepoint html page. My charts render and display correctly in Chrome, but only the pie chart renders in Internet Explorer 11. If I create a static array of data for the series, it works. If I try to populate it dynamically, it only works in the pie chart.
<script type="text/javascript">
$(document).ready(function() {
Date.dateDiff = function(datepart, fromdate, todate) {
datepart = datepart.toLowerCase();
var diff = todate - fromdate;
var divideBy = {
w: 604800000,
d: 86400000,
h: 3600000,
n: 60000,
s: 1000
};
return Math.floor(diff / divideBy[datepart]);
}
function businessWeekDifference(startDate, endDate) {
// Validate input
if (endDate < startDate)
return 0;
var diff = Date.dateDiff('d', startDate, endDate);
var days = diff;
// Subtract two weekend days for every week in between
var weeks = Math.floor(days / 7);
days = days - (weeks * 2);
// Handle special cases
var startDay = startDate.getDay();
var endDay = endDate.getDay();
// Remove weekend not previously removed.
if (startDay - endDay > 1)
days = days - 2;
// Remove start day if span starts on Sunday but ends before Saturday
if (startDay == 0 && endDay != 6) {
days = days - 1;
}
// Remove end day if span ends on Saturday but starts after Sunday
if (endDay == 6 && startDay != 0) {
days = days - 1;
}
return days;
}
function average(arr) {
return _.reduce(arr, function(memo, num) {
return memo + num;
}, 0) / (arr.length === 0 ? 1 : arr.length);
}
function translateMonth(d) {
var month;
if (d.getMonth() === 0) {
month = 'Jan';
} else if (d.getMonth() === 1) {
month = 'Feb';
} else if (d.getMonth() === 2) {
month = 'Mar';
} else if (d.getMonth() === 3) {
month = 'Apr';
} else if (d.getMonth() === 4) {
month = 'May';
} else if (d.getMonth() === 5) {
month = 'Jun';
} else if (d.getMonth() === 6) {
month = 'Jul';
} else if (d.getMonth() === 7) {
month = 'Aug';
} else if (d.getMonth() === 8) {
month = 'Sep';
} else if (d.getMonth() === 9) {
month = 'Oct';
} else if (d.getMonth() === 10) {
month = 'Nov';
} else if (d.getMonth() === 11) {
month = 'Dec';
}
return month;
}
function generateX(comp, tbs, sched) {
var xAxis = [];
for (var i = 0; i < comp.length; i++) {
var n = comp[i].name;
xAxis.push(n);
}
for (var i = 0; i < tbs.length; i++) {
var n2 = tbs[i].name;
xAxis.push(n2);
}
for (var i = 0; i < sched.length; i++) {
var n3 = sched[i].name;
xAxis.push(n3);
}
return xAxis;
}
$().SPServices({
operation: "GetListItems",
CAMLQuery: "<Query><OrderBy><FieldRef Name='Initial_x0020_Contact_x0020_Date' Ascending='True'/><FieldRef Name='Date' Ascending='True'/><FieldRef Name='Date_x0020_Session_x0020_Schedul' Ascending='True'/><FieldRef Name='Session_x0020_Completion_x0020_D' Ascending='True'/><FieldRef Name='Business_x0020_Unit'/><FieldRef Name='Session_x0020_Status'/></OrderBy></Query>",
CAMLViewFields: "<ViewFields><FieldRef Name='Initial_x0020_Contact_x0020_Date'/><FieldRef Name='Date'/><FieldRef Name='Date_x0020_Session_x0020_Schedul'/><FieldRef Name='Session_x0020_Completion_x0020_D'/><FieldRef Name='Business_x0020_Unit'/><FieldRef Name='Session_x0020_Status'/></ViewFields>",
listName: "{C6673173-9AC5-4A6B-9401-15D0F38EFCB8}",
completefunc: function(xData, status) {
var diff1 = [];
var diff2 = [];
var diff3 = [];
var spc1Data = [];
var toBeSchedStatsData = [];
var schedStatsData = [];
var completedStatsData = [];
var canceledStatsData = [];
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var bu = $(this).attr('ows_Business_x0020_Unit');
var ic = new Date($(this).attr('ows_Initial_x0020_Contact_x0020_Date'));
var as = new Date($(this).attr('ows_Date_x0020_Session_x0020_Schedul'));
var sc = new Date($(this).attr('ows_Session_x0020_Completion_x0020_D'));
var d = new Date($(this).attr('ows_Date'));
var status = $(this).attr('ows_Session_x0020_Status');
var month;
var difference1;
var difference2;
var difference3;
var isDate = function(date) {
return ((new Date(date) !== "Invalid Date" && !isNaN(new Date(date))));
}
//YTD Requests by ATO data
if (bu === "Global Connections Management"){
spc1Data.push({
BU: "GCM"
});
}else if(bu === "Technology Design & Architecture"){
spc1Data.push({
BU: "TD&A"
});
}else if(bu === "Global Customer Service"){
spc1Data.push({
BU: "GCS"
});
}else{
spc1Data.push({
BU: bu
});
}
if (isDate(d)) {
//Coaching Request Volume data
if (status === "To be Scheduled" && !isDate(ic)) {
month = translateMonth(d);
toBeSchedStatsData.push({
status: status,
date: month
});
}
if (status === "Canceled" || status === "No Show") {
if (!isDate(as)) {
month = translateMonth(ic);
canceledStatsData.push({
status: status,
date: month
});
} else {
month = translateMonth(as);
canceledStatsData.push({
status: status,
date: month
});
}
}
if (isDate(ic)) {
//YTD Requests by ATO data
difference1 = businessWeekDifference(d, ic);
month = translateMonth(ic);
diff1.push({
name: month,
y: difference1
});
//Coaching Request Volume data
if (status === "To be Scheduled") {
month = translateMonth(ic);
toBeSchedStatsData.push({
status: status,
date: month
});
}
}
if (isDate(as)) {
//YTD Requests by ATO data
difference2 = businessWeekDifference(d, as);
month = translateMonth(as);
diff2.push({
name: month,
y: difference2
});
//Coaching Request Volume data
if (status === "Scheduled") {
month = translateMonth(as);
schedStatsData.push({
status: status,
date: month
});
}
}
if (isDate(sc)) {
//YTD Requests by ATO data
difference3 = businessWeekDifference(d, sc);
month = translateMonth(sc);
diff3.push({
name: month,
y: difference3
});
//Coaching Request Volume data
if (status === "Completed") {
month = translateMonth(sc);
completedStatsData.push({
status: status,
date: month
});
}
}
}
});
/***********************************************************************************
* Coaching Request Volume Stacked Bar Chart *
************************************************************************************/
var counts1 = _.countBy(toBeSchedStatsData, 'date');
var tbsData = _.map(counts1, function(value, key) {
return {
name: key,
y: value
};
});
//Scheduled
var counts2 = _.countBy(schedStatsData, 'date');
var schedData = _.map(counts2, function(value, key) {
return {
name: key,
y: value
};
});
//Completed
var counts3 = _.countBy(completedStatsData, 'date');
var compData = _.map(counts3, function(value, key) {
return {
name: key,
y: value
};
});
//Canceled
var counts4 = _.countBy(canceledStatsData, 'date');
var cancData = _.map(counts4, function(value, key) {
return {
name: key,
y: value
};
});
function verifyDataCount(arr1, comp) {
if (arr1.length < comp.length) {
var n = comp[0].name;
var add_object = {
"name": n,
"y": 0
};
arr1.splice(0, 0, add_object);
}
}
verifyDataCount(tbsData, compData);
verifyDataCount(schedData, compData);
verifyDataCount(cancData, compData);
var tbsOutput = _.pluck(tbsData, "y");
var cancOutput = _.pluck(cancData, "y");
var schedOutput = _.pluck(schedData, "y");
var compOutput = _.pluck(compData, "y");
console.log(tbsOutput);
//Draw Chart
var chart1 = new Highcharts.Chart({
chart: {
type: 'column',
options3d: {
enabled: false,
alpha: 5,
beta: 5,
viewDistance: 25,
depth: 40
},
renderTo: 'buRequestsStack',
marginTop: 80,
marginRight: 40,
plotBorderColor: '#0574AC',
borderWidth: .5,
plotShadow: true
},
credits: {
enabled: false
},
title: {
text: 'Coaching Request Volume'
},
legend: {
itemStyle: {
color: '#868686',
fontSize: '10px',
fontWeight: 'medium'
}
},
xAxis: {
categories: generateX(compData, tbsData, schedData)
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Requests'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}' + ' {point.percentage:1.0f}%'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'To be Scheduled',
data: tbsOutput
}, {
name: 'Scheduled',
data: schedOutput
}, {
name: 'Completed',
data: compOutput
}, {
name: 'Canceled',
data: cancOutput
}]
});
/***********************************************************************************
* YTD Requests by ATO Pie Chart *
************************************************************************************/
var spcData = [];
for (var i = 0; i < spc1Data.length; i++) {
if (String(spc1Data[i].BU).indexOf('-') > -1) {
var bu = String(spc1Data[i].BU);
spc1Data[i].BU = bu.slice(0, 8);
spcData[i] = spc1Data[i];
} else {
spcData[i] = spc1Data[i];
}
}
var chartData = [];
var buData = _.groupBy(spcData, 'BU');
_.each(buData, function(row) {
var buCount = row.length;
chartData.push({
name: row[0].BU,
y: buCount,
drilldown: row[0].BU
});
});
var chart2 = new Highcharts.Chart({
chart: {
type: 'pie',
plotBorderColor: '#0574AC',
borderWidth: .5,
plotShadow: true,
options3d: {
enabled: true,
alpha: 55,
beta: 0
},
renderTo: 'buRequests',
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'YTD Requests by ATO'
},
tooltip: {
pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%'
//percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
distance: 1,
useHTML: true,
enabled: true,
fontWeight: 'medium',
//format: '{point.name}'+ '<br>' + '{point.y}' +' Requests' + '<br>' + '{point.percentage:1.0f}%',
formatter: function() {
var req;
if (this.point.y === 1) {
req = " Request";
} else {
req = " Requests";
}
return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>';
}
}
}
},
series: [{
type: 'pie',
name: 'BU Count',
data: chartData
}],
});
/***********************************************************************************
* Coaching Request Cycle Time Line Chart *
************************************************************************************/
var chartData1 = [];
chartData1 = _.chain(diff1)
.groupBy("name")
.map(function(value, key) {
return {
name: key,
y: Math.round(average(_.pluck(value, "y")))
}
})
.value();
var chartData2 = [];
chartData2 = _.chain(diff2)
.groupBy("name")
.map(function(value, key) {
return {
name: key,
y: Math.round(average(_.pluck(value, "y")))
}
})
.value();
var chartData3 = [];
chartData3 = _.chain(diff3)
.groupBy("name")
.map(function(value, key) {
return {
name: key,
y: Math.round(average(_.pluck(value, "y")))
}
})
.value();
var chart3 = new Highcharts.Chart({
chart: {
type: 'line',
renderTo: 'buRequestsLine',
plotBorderColor: '#0574AC',
borderWidth: .5,
plotShadow: true
},
credits: {
enabled: false
},
title: {
text: 'Coaching Request Cycle Time',
style: {
color: '#666666',
fontWeight: 'bold'
}
},
legend: {
itemStyle: {
color: '#868686',
fontSize: '10px',
fontWeight: 'medium'
}
},
xAxis: {
categories: _.pluck(chartData3, name),
labels: {
//enabled: true,
formatter: function() {
return this.value;
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Average # of Business Days',
style: {
color: '#666666'
}
}
},
tooltip: {
//pointFormat: '{point.y}' + ' Days',
//formatter: function() {
//return 'The value for <b>' + point.y + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
//},
shared: false,
crosshairs: true
//percentageDecimals: 1
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: false
}
}
},
series: [{
//type: 'line',
name: 'Initial Contact',
data: chartData1,
color: '#EF6F00'
}, {
//type: 'line',
name: 'Appt Scheduled',
data: chartData2,
color: '#4CA90C'
}, {
//type: 'line',
name: 'Coaching Completed',
data: chartData3,
color: '#0574AC'
}]
});
} //finalFunct
}); //end .SPServices2
});//end doc
回答1:
The problem is the console.log() line. In Internet Explorer the console is only available when the debugger is opened and an error is thrown if it is not.
Replace console.log(tbsOutput); with alert(tbsOutput); and it should then work as expected.
回答2:
The date that Microsoft SharePoint passes in is seen as invalid by the JavaScript running in Microsoft Internet Explorer. I brought the date in as a string, parsed it, and pushed it to a JavaScript date object and everything works perfectly!
来源：https://stackoverflow.com/questions/31443139/highcharts-dont-render-in-internet-explorer-11