Javascript Highcharts:在数据系列中显示错误的颜色

我使用Highcharts API创建了这个图。图形绘制正确，并在浏览器上显示正确的颜色。 但是，当我在电视上使用Front Face软件发布我的网站时，它会显示错误的颜色，如下图所示。

生成此图的代码如下所示：

var seriesData = addSeriesData(response); 
console.log("XAxiz " +JSON.stringify(seriesData));
var maxY;
if(response)
var jobsLength = response.length;
var chart = new Highcharts.Chart({
    global: {
        useUTC: false,
    },
    chart: {
        renderTo: 'testJobTrends',
        type: 'spline',
        height :  400,

        events : {
            load: function () {
                var i = 0;
                var chart = this;
                var timeIntervalJobTrends = 2000;
                var timeIntervalJobTrends = 15000 / (chart.series.length );
                console.log("Time Interval --> "+timeIntervalJobTrends + "  length  "+chart.series.length)
                if(isYMaxRequired(response)) {
                    //console.log(response[i].displayName + " Adjusted Max");
                    chart.yAxis[0].update({max:Date.UTC(1970,01,03)});
                    if(response[0].jobName=="C_PP_DW_PROMPT_MAIN"){
                        console.log(" Product Legacy ate my head");
                        chart.yAxis[0].update({max:Date.UTC(1970,01,03,07,0,0)});
                    }
                }

                function highlightDataPeriodically(){
                    var data2 = bindPointDataColorXLabelAlgo3(response[i].endTimeUTC, response[i].pointColor,response[i].xAxisUTC);
                        console.log("After color Change  "+ JSON.stringify(data2));

                chart.series[i].update({color: '#ecb631',
                    lineWidth:5,

                    data: data2,
                    showInLegend :true,
                    marker: {
                        radius: 5,
                       // linewidth:6
                    },
                    showInLegend : true




                }, true, false);

                console.log(" y Axis Length "+ chart.yAxis.length+"  year "+response[i].slaTimeArray[0] + " Time "+ response[i].slaTimeArray[3]);

                chart.yAxis[0].removePlotLine('sla-plot-line');
                chart.yAxis[0].addPlotLine({
                  value:Date.UTC(response[i].slaTimeArray[0],response[i].slaTimeArray[1],response[i].slaTimeArray[2],response[i].slaTimeArray[3],response[i].slaTimeArray[4],response[i].slaTimeArray[5]),
                  color : '#614126',
                  width : 3,
                 dashStyle: 'ShortDashDot',
                  id : 'sla-plot-line',
                  label: {
                      text : 'SLA TIME' ,
                     style: {
                         color: '#614126',
                         fontWeight: 'bold'
                     }


                  }
              }) ;
                //var timeIntervalJobTrends = 15000 / chart.series.length;
                var data1 = bindPointDataColorXLabelAlgo2(response[i].endTimeUTC, response[i].pointColor,response[i].xAxisUTC);
                //if(i != 0 ) {
                if(chart.series.length > 1 ) {
                    chart.series[((i + chart.series.length -1) % chart.series.length)].update({color: '#99999a',
                        lineWidth:1,
                        marker: {
                            symbol: 'circle',
                            //fillColor : 'rgb(156,156,156)',
                            radius: 2,
                           // linewidth:6
                        },
                        //data: data1
                        showInLegend :false


                    }, true, false);
                    //chart.series[i-1].options.showInLegend = false;
                //  chart.series[i-1].legendItem = null;
                    //  chart.legend.destroyItem(chart.series[i-1]);
                      //  chart.legend.render();
                }
                    i++;
                    if(i == chart.series.length ){

                        i = 0;
                        //clearInterval(setIntervalJobTrendID);
                        console.log(" CLeared");
                    }
                    //console.log(chart.series.name);
                }

                if(setIntervalJobTrendID){
                    console.log("Set Interval of Job Trends    --> "+i);
                    clearInterval(setIntervalJobTrendID);
                    //i = 0;
                }

                 setIntervalJobTrendID = setInterval(highlightDataPeriodically,timeIntervalJobTrends);
                highlightDataPeriodically();



            },


        }
    },
    title: {
        text: "SLA Adherence : Daily",
        style: {
            fontFamily: 'Verdana',
            color: '#003087',
            fontSize: '20px',
            fontWeight: 'bold'
        },
    },
    subtitle: {
        text: null,
    },

    xAxis: {
         type: 'datetime',
         tickInterval: 24 * 60 * 60 * 1000,
        title: {
            text: null,
        },
        //categories: parameters,
        labels: {
            format: '{value:%m/%e}' ,

            // formatter: function() {
         //        if(this.color === '#123456') {
         //            return '';    
         //        } 
         //    },


            style: {
                fontFamily: 'Verdana',
                color: '#000',
                fontWeight: 'bold',
                fontSize: '13px',
            },
            rotation: -45

        },
      //  dateTimeLabelFormats: { // don't display the dummy year
        //    month: '%b %e',
           // year: '%Y'
        //}

    },
    credits: {
        enabled: false,
    },
    yAxis: {
        type: 'datetime',

        //tickInterval: 7200000,
    //  min: getCurrentUTCDate(),
    //  max: getMaxYTim(),
       // max: Date.UTC(1970,01, 03,7,0,0),
        plotLines: [{
          //  value: response[i].slaTime,
            width: 3,
            color: '#805e36',
            dashStyle: 'dash',
            zIndex: 1,
            label: {
                text: 'SLA 09:00AM',
                align: 'right',
                style: {
                    fontFamily: 'Verdana',
                    color: '#000',
                    fontSize: '16px',
                    fontWeight: 'bold'
                }
            }
        }, {
          //  value: currentSoftSLAPlotLine(),
            width: 3,
            color: '#b4854e',
            dashStyle: 'dash',
            zIndex: 1,
            label: {
                text: 'Soft SLA 08:00AM',
                align: 'right',
                y: 16,
                style: {
                    fontFamily: 'Verdana',
                    color: '#000',
                    fontSize: '16px',
                    fontWeight: 'bold'

                }
            }
        }],
        //max: getMaximumUTCDate(),
         //tickInterval : 24 * 36 * 1000,
        title: {
            text: '',
        },
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%H:%M', this.value);

            },
            style: {
                fontFamily: 'Verdana',
                color: '#000',
                fontWeight: 'bold',
                fontSize: '13px'
            }
        },
    },
    plotOptions: {
        spline: {
            dataLabels: {
                enabled: false,
                y: -10,
                backgroundColor: '#FFF',
                formatter: function() {
                    return Highcharts.dateFormat('%H:%M', this.y);
                },
                style: {
                    fontFamily: 'Verdana',
                    color: '#000',
                    fontSize: '20px',
                    fontWeight: 'bold'

                }
            },
        },
        /*
        series: {
            marker: {
                fillColor: null,
                lineWidth: 5,
                lineColor: null
                    // inherit from series
            }
        }
        */
    },
    tooltip: {
        style:{
            padding : 0,
            fontWeight: 'bold',

        },
        crosshairs: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function() {
            return '<span style="background-color:'+ this.point.pointColor+';color:#eee">'+ this.series.name+'<br/>'+Highcharts.dateFormat('%b/%e', this.x) + ' @ ' + Highcharts.dateFormat('%H:%M', this.y)  + '</span>';
        },
        useHTML: true,
    },
    legend: {
        //enabled: true,
        symbolWidth: 50,
        itemStyle: {
            fontSize:'17px',
            font: '17pt  Verdana, sans-serif',
            fontWeight: 'bold'
         },



    },

    series : seriesData
});

var seriesData=addSeriesData（响应）；
log（“XAxiz”+JSON.stringify（seriesData））；
var-maxY；
如果（答复）
var jobsLength=响应长度；
var图表=新的Highcharts.图表({
全球：{
useUTC:false，
},
图表：{
renderTo:“testJobTrends”，
类型：“样条线”，
身高：400，
活动：{
加载：函数（）{
var i=0；
var图表=此；
var timeIntervalJobTrends=2000；
var timeIntervalJobTrends=15000/（chart.series.length）；
log（“时间间隔-->”+timeIntervalJobTrends+“长度”+chart.series.length）
如果需要（isYMaxRequired（响应））{
//console.log（响应[i].displayName+“调整后的最大值”）；
chart.yAxis[0].更新（{max:Date.UTC（1970,01,03）}）；
if（响应[0].jobName==“C\u PP\u DW\u PROMPT\u MAIN”）{
log（“产品遗产吃了我的头”）；
chart.yAxis[0].更新（{max:Date.UTC（1970,01,03,07,0,0）}）；
}
}
函数highlightdataperiodic（）{
var data2=bindpointdatacolorxlabelago3（响应[i].endTimeUTC，响应[i].pointColor，响应[i].xaxistutc）；
log（“颜色更改后”+JSON.stringify（data2））；
chart.series[i].更新（{color:'#ecb631'，
线宽：5，
数据：数据2，
showInLegend：是的，
标记：{
半径：5，
//线宽：6
},
showInLegend：对
}，对，错）；
console.log（“y轴长度”+chart.yAxis.Length+“年”+response[i].slatimerarray[0]+“时间”+response[i].slatimerarray[3]）；
chart.yAxis[0]。移除绘图线（'sla-plot-line'）；
chart.yAxis[0].addPlotLine({
值：Date.UTC（响应[i].slatimerarray[0]，响应[i].slatimerarray[1]，响应[i].slatimerarray[2]，响应[i].slatimerarray[3]，响应[i].slatimerarray[4]，响应[i].slatimerarray[5]），
颜色：“#614126”，
宽度：3，
dashStyle:“ShortDashDot”，
id:“sla绘图线”，
标签：{
文本：“SLA时间”，
风格：{
颜色：“#614126”，
fontWeight:“粗体”
}
}
}) ;
//var timeIntervalJobTrends=15000/chart.series.length；
var data1=bindpointdatacolorxlabelago2（响应[i].endTimeUTC，响应[i].pointColor，响应[i].xaxistutc）；
//如果（i！=0）{
如果（chart.series.length>1）{
chart.series[（（i+chart.series.length-1）%chart.series.length）].update（{color:'9999a'，
线宽：1，
标记：{
符号：'圆'，
//fillColor:'rgb（156156156）'，
半径：2，
//线宽：6
},
//数据：数据1
showInLegend:false
}，对，错）；
//chart.series[i-1].options.showInLegend=false；
//chart.series[i-1].legendItem=null；
//图表图例项目（图表系列[i-1]）；
//chart.legend.render（）；
}
i++；
if（i==chart.series.length）{
i=0；
//clearInterval（setIntervalJobTrendID）；
控制台日志（“清除”）；
}
//console.log（chart.series.name）；
}
if（setIntervalJobTrendID）{
log（“设置作业趋势间隔-->”+i）；
clearInterval（setIntervalJobTrendID）；
//i=0；
}
setIntervalJobTrendID=setInterval（HighlightDataPeriodic，timeIntervalJobTrends）；
highlightdata（）；
},
}
},
标题：{
文本：“SLA遵守：每日”，
风格：{
fontFamily：“Verdana”，
颜色：'#003087'，
fontSize:'20px'，
fontWeight:“粗体”
},
},
副标题:{
文本：空，
},
xAxis：{
键入：“日期时间”，
滴答声间隔：24*60*60*1000，
标题：{
文本：空，
},
//类别：参数，
标签：{
格式：“{值：%m/%e}”，
//格式化程序：函数（）{
//如果（this.color=='#123456'）{
//返回“”；
//        } 
//    },
风格：{
fontFamily：“Verdana”，
颜色：“#000”，
fontWeight:'粗体'，
fontSize:'13px'，
},
轮换：-45
},
//dateTimeLabelFormats:{//不显示虚拟年份
//月份：'%b%e'，
//年份：'%Y'
//}
},
学分：{
启用：false，
},
亚克斯：{
键入：“日期时间”，
//时间间隔：7200000，
//min:getCurrentUTCDate（），
//max:getMaxYTim（），
//最大值：UTC日期（1970,01,03,7,0,0），
绘图线：[{
//
plotOptions: {

            series: {
                enableMouseTracking: false
            },
}