我使用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
});
请帮助我。
答案 0 :(得分：3)
我找到了解决这个问题的方法。 Front Face基于Awesomium 1.6.5浏览器引擎，不支持许多HTML5功能。当highcharts绘制样条曲线时，它会在样条曲线图周围添加跟踪器，它会添加alpha渐变。 Awesomium 1.6.5无法识别alpha渐变，因此将其显示为黑色。在highcharts中禁用enableMouseTracker时，它可以工作。无论在哪里存在α梯度，FrontFace都无法识别它。
plotOptions: {
series: {
enableMouseTracking: false
},
}
在绘制图表时添加上面的代码解决了它。