javascript - Highcharts : Showing wrong color in data series

Question

我使用 Highcharts API 创建了图表。该图绘制正确，并在浏览器上显示正确的颜色。然而，当我在电视上使用 Front Face 软件发布我的网站时，它显示错误的颜色，如下图所示。 Link to Forum for Images

生成这个图的代码如下:

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
});

请帮我解决这个问题。

Answer 1

我找到了这个问题的解决方案。 Front Face 基于 Awesomium 1.6.5 浏览器引擎，不支持许多 HTML5 功能。当 highcharts 绘制样条曲线时，它会在样条曲线图周围添加跟踪器，从而添加 alpha 梯度。 Awesomium 1.6.5 不识别 alpha 渐变，因此显示为黑色。在 highcharts 中禁用 enableMouseTracker 时，它起作用了。无论 alpha 渐变出现在哪里，FrontFace 都无法识别它。

plotOptions: {

            series: {
                enableMouseTracking: false
            },
}

在绘制图表时添加上面的代码解决了它。