Highcharts不在Internet Explorer 11中呈现 [英] Highcharts don't render in Internet Explorer 11
本文介绍了Highcharts不在Internet Explorer 11中呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Sharepoint html页面中制作仪表板。我的图表在Chrome中正确呈现并正确显示，但只有饼图在Internet Explorer 11中呈现。如果为该系列创建静态数据阵列，它将起作用。如果我尝试动态填充它，它只能在饼图中起作用。
< 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
};
返回Math.floor（diff / divideBy [datepart]）;
}
函数businessWeekDifference（startDate， endDate）{
//验证输入
if（endDate< startDate）
return 0;
var diff = Date.dateDiff（'d '，startDate，endDate）;
var days = diff;
//减去
var weeks = Math.floor（days / 7）之间每周的两个周末天数;
days = days - （weeks * 2）;
//处理特殊情况
var startDay = startDate.getDay（）;
var endDay = endDate.getDay（）;
//删除以前未删除的周末。
if（startDay - endDay> 1）
days = days - 2;
//如果跨度在星期日开始但在星期六之前结束
，则删除开始日if（startDay == 0&& endDay！= 6）{
days = days - 1;
}
//如果跨度在星期六结束，但在星期天开始
if（endDay == 6&& startDay！= 0）{
天=天-1;
}
退货天数;
函数average（arr）{
return _.reduce（arr，function（memo，num）{
return memo + num;
}，0）/（arr.length === 0？1：arr.length）;
}
函数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;
}
函数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
xAxis.push（n2）;
}
for（var i = 0; i< sched.length; i ++）{
var n3 = sched [i] .name;
xAxis.push（n3）;
}
return xAxis;
$ b $（）。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-9 401-15D0F38EFCB8}，
completefunc：function（xData，status）{
var diff1 = [];
var diff2 = [];
var diff3 = [];
var spc1Data = [];
var toBeSchedStatsData = [];
var schedStatsData = [];
var completedStatsData = [];
var canceledStatsData = [];
$ b $（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状态= $（this）.attr（'ows_Session_x0020_Status'）;
var month;
var差异1;
var差异2;
var差异3;
var isDate =函数（日期）{
return（（new Date（date）！==Invalid Date&&！isNaN（new Date（date））））;
}
//年初至今ATO数据请求
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））{
//辅导请求卷数据
if（status ===To Scheduled &&！isDate（ic））{
month = translateMonth（d）;
toBeSchedStatsData.push（{
status：status，
date：month
}）;
}
if（status ===Canceled|| status ===No Show）{
if（！isDate（as））{
month = translateMonth （我知道了）;
cancelledStatsData.push（{
status：status，
date：month
}）;
} else {
month = translateMonth（as）;
cancelledStatsData.push（{
status：status，
date：month
}）;如果（isDate（ic））{
//年初至今由ATO数据请求
difference1 = businessWeekDifference（d，ic）;
}
}
。
月= translateMonth（ic）;
diff1.push（{
name：month，
y：difference1
}）;
//辅导请求卷数据
if（status ===To Scheduled）{
month = translateMonth（ic）;
toBeSchedStatsData.push（{
status：status，
date：month
}）;如果（isDate（as））{
//年初至今ATO数据请求
difference2 = businessWeekDifference（d，as）;
}
}
if
month = translateMonth（as）;
diff2.push（{
name：month，
y：difference2
}）;
//辅导请求卷数据
if（status ===Scheduled）{
month = translateMonth（as）;
schedStatsData.push（{
status：status，
date：month
}）;
}
}
if（isDate（sc））{
// ATD ATO数据请求
difference3 = businessWeekDifference（d，sc）;
month = translateMonth（sc）;
diff3.push（{
name：month，
y：difference3
}）;
$ b $ //辅导请求卷数据
if（status ===Completed）{
month = translateMonth（sc）;
completedStatsData.push（{
status：status，
date：month
}）;
}
}
}
}）;
/ ***************************************** ******************************************
*辅导请求量堆积条形图*
****************************************** ****************************************** /
var counts1 = _.countBy（toBeSchedStatsData，'date'）;
var tbsData = _.map（counts1，function（value，key）{
return {
name：key，
y：value
};
}）;
//计划
var counts2 = _.countBy（schedStatsData，'date'）;
var schedData = _.map（counts2，function（value，key）{
return {
name：key，
y：value
};
}）;
//已完成
var counts3 = _.countBy（completedStatsData，'date'）;
var compData = _.map（counts3，function（value，key）{
return {
name：key，
y：value
};
}）;
//取消
var counts4 = _.countBy（cancelStatsData，'date'）;
var cancData = _.map（counts4，function（value，key）{
return {
name：key，
y：value
};
}）;
函数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）;
//绘制图表
var chart1 =新增Highcharts.Chart（{
图表：{
类型：'列'，
options3d：{
已启用：false，
alpha：5，
beta：5，
viewDistance：25，
depth：40
}，
renderTo：'buRequestsStack'，
marginTop：80，
marginRight：40，
plotBorderColor：'＃0574AC'，
borderWidth：.5，
plotShadow：true
$，
学分：{
启用：false
}，
title：{
text：'Coach请求量'
}，
图例：{
itemStyle：{
color：'＃868686'，
fontSize：'10px'，
fontWeight ：'medium'
}
}，
xAxis：{
类别：generateX（compData，tbsData，schedData）
}，
yAxis：{
allowDecimals：false，
min：0，
title：{
text：'请求数'
}
}，
tooltip：{
headerFormat：'< b> {point.key}< / b>< br>'，
pointFormat：'< span style =color ：{} series.color > \\\●< /跨度> {series.name}：{point.y}'+'{point.percentage：1.0f}％'
}，
plotOptions：{
列：{
堆积：'普通'，
深度：40
}
}，
系列：[{
name：'To be Scheduled'，
data：tbsOutput
}，{
name：'Scheduled'，
data：schedOutput
}，{
name：'Completed'，
data：compOutput
}，{
name：'Canceled'，
data：cancOutput
}]
}）;
/ ***************************************** **************************************
*年初至今请求ATO饼图*
************************************** ****************************************** /
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（{
图：{
类型：'pie'，
plotBorderColor：'＃0574AC'，
borderWidth：.5，
plotShadow：true，
options3d：{
启用：true，
alpha：55，
beta：0
}，
renderTo：'buRequests'，
plotBorderWidth：null，
plotShadow：false
}，
学分：{
启用：false
$，
title：{
text：'本年度至今的请求'
}，
工具提示：{
pointForma t：'{point.y}'+'请求'+'< br>'+'{point.percentage：1.0f}％'
// percentDecimals：1
}，
plotOptions：{
pie：{
allowPointSelect：true，
cursor：'pointer'，
depth：35，
dataLabels：{
distance： 1，
useHTML：true，
启用：true，
fontWeight：'medium'，
//格式：'{point.name}'+'< br>' +'{point.y}'+'请求'+'< br>'+'{point.percentage：1.0f}％'，
formatter：function（）{
var req;
if（this.point.y === 1）{
req =Request;
} else {
req =请求;
}
return'< span style =color：'+ this.point.color +'>'+ this.point.name +'< br>'+ this.point.y + req +'< br>'+ Math.round（this.percentage）+'％'+'< / span>';
}
}
}
}，
系列：[{
类型：'pie'，
名称：'BU Count'，
data：chartData
}]，
}）;
/ ***************************************** ******************************************
*辅导请求周期时间线图*
************************************** ****************************************** /
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（{
图：{
类型：'line'，
renderTo：'buRequestsLine'，
plotBorderColor： '＃0574AC'，
borderWidth：.5，
plotShadow：true
}，
credits：{
enabled：false
}，
标题：{
text：'Coaching Request Cycle Time'，
style：{
color：'＃666666'，
fontWeight：'bold'
} $
itemStyle：{
color：'＃868686'，
fontSize：'10px'，
fontWeight：'medium'
}
}，
xAxis：{
categories：_.pluck（chartData3，name），
labels：{
//启用：true，
formatter：function（）{
return this.value;
}
}
}，
yAxis：{
allowDecimals：false，
min：0，
title：{
文本：'平均工作日数'，
风格：{
颜色：'＃666666'
}
}
}，
工具提示：
// pointFormat：'{point.y}'+'Days'，
//格式化程序：function（）{
//返回'< b>'的值+ .y +'< / b>是< b> + this.y +'< / b> ;,串联'+ this.series.name;
//}，
共享：false，
crosshairs：true
// percentDecimals：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'
}，{
//类型：'line'，
名称：'辅导完成'，
data：chartData3，
颜色：'＃0574AC'
}]
}）;
} // finalFunct
}）; // end .SPServices2
}）; // end doc
解决方案
微软SharePoint通过的日期在Microsoft Internet Explorer中运行的JavaScript被视为无效。我把日期作为一个字符串进行分析，然后将其推送到一个JavaScript日期对象，并且一切都完美无缺！
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
解决方案
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!
这篇关于Highcharts不在Internet Explorer 11中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
