Highcharts не визуализируются в Internet Explorer 11

Question

Я делаю панель управления на странице 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 
     }; 

     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 

Answer 1

Дата, в которую Microsoft SharePoint проходит, считается, что JavaScript работает в Microsoft Internet Explorer. Я привел дату в виде строки, проанализировал ее и нажал на объект даты JavaScript, и все работает отлично!

Answer 2

Проблема заключается в console.log() линии. В Internet Explorer консоль доступна только в том случае, если отладчик открыт, и если это не так, возникает ошибка.

Замените console.log(tbsOutput); на alert(tbsOutput);, и он должен работать должным образом.