4
Я создал график, используя API Highcharts. Граф рисуется правильно и показывает правильные цвета в браузере. Однако, когда я публикую свой веб-сайт с помощью программного обеспечения Front Face на телевизоре, он показывает неправильный цвет, как показано на следующих изображениях. Link to Forum for ImagesHighcharts: отображение неправильного цвета в серии данных
Код для создания этого графика выглядит следующим образом:
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
});
Пожалуйста, помогите мне с этим.
Как мы можем повторить эту проблему? –
Я нашел решение этой проблемы. Front Face основана на движке браузера Awesomium 1.6.5, который не поддерживает многие функции HTML5. Когда highcharts рисует сплайн, он добавляет трекер вокруг графика сплайнов, который добавляет альфа-градиент. Awesomium 1.6.5 не распознает альфа-градиент, поэтому показывает его как черный. При отключении enableMouseTracker в высоких диаграммах он работал. Где бы ни находился альфа-градиент, FrontFace не узнал его. –