...但是它当然可以在所有其他浏览器中完美显示,当然只有IE很重要。
我知道这种类型的问题已经被问过多次了,但是我已经前后遍历了这段代码定义,因此看不到哪里可能有任何错误。这些是传递给我的highcharts图表对象的选项。我看不到任何不应该出现的逗号或数据。在这里的任何帮助将不胜感激-谢谢!
title: {
text: ''
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.x:%B %Y}: <b>{point.y}</b><br/>'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
enabled: true
},
labels: {
format: '{value:%b %Y}'
},
tickLength: 0
},
yAxis: {
title: {
text: 'Risk Score',
margin: 50
},
max: 25,
min: 0
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 150,
itemMarginBottom: 5,
margin: 15,
itemStyle: {
color: '#337ab7'
}
},
plotOptions: {
series: {
lineWidth: 0,
events: {
legendItemClick: function (event) {
_this.send('chartElementClick', event.target.userOptions.id, event.target.userOptions.name);
}
},
cursor: 'pointer',
point: {
events: {
click: function () {
_this.send('chartElementClick', this.options.id, this.options.name);
}
}
},
marker: {
enabled: false
}
}
}
编辑:plotOptions中的lineWidth为0,因为我手动将其设置为每个系列中不同行的不同值,所以这不是问题,因为我说过这些行在其他行中看起来还不错浏览器。感谢您的澄清@ppotaczek
编辑2:这是其中一个数据集的示例。它们都与此类似。这是从Chrome开发者工具中复制粘贴的:
data: Array(13)
0: {x: 1531800000000, y: null, id: 1, name: "Super New Risk Guy"}
1: {x: 1534478400000, y: null, id: 1, name: "Super New Risk Guy"}
2: {x: 1537156800000, y: null, id: 1, name: "Super New Risk Guy"}
3: {x: 1539748800000, y: null, id: 1, name: "Super New Risk Guy"}
4: {x: 1542430800000, y: 1, id: 1, name: "Super New Risk Guy"}
5: {x: 1545022800000, y: 8, id: 1, name: "Super New Risk Guy"}
6: {x: 1547701200000, y: 8, id: 1, name: "Super New Risk Guy"}
7: {x: 1550379600000, y: 4, id: 1, name: "Super New Risk Guy"}
8: {x: 1552795200000, y: 13, id: 1, name: "Super New Risk Guy"}
9: {x: 1555473600000, y: 14, id: 1, name: "Super New Risk Guy"}
10: {x: 1558065600000, y: 8, id: 1, name: "Super New Risk Guy"}
11: {x: 1560744000000, y: 8, id: 1, name: "Super New Risk Guy"}
12: {x: 1563336000000, y: 8, id: 1, name: "Super New Risk Guy"}
length: 13
__proto__: Array(0)
id: 1
lineWidth: 3
marker: {fillColor: "#FF9D9D"}
name: "Super New Risk Guy"
编辑3:加载页面时,IE版本的开发工具也完全没有控制台错误。
编辑4:这是我用来生成数据集的代码。没什么神奇的:
let dataArray = A();
let startMonth = this.get('model.queryParams.from_selected_month');
let trendMonthData = this.get('model.reportData.trend_data');
let categoryThresholds = this.get('model.reportData.category_thresholds');
//set charting data
if (trendMonthData && trendMonthData.length > 0) {
trendMonthData.forEach((trendMonthDataList, monthIndex) => {
trendMonthDataList.forEach((trendDataObj) => {
let currentTrendObj = dataArray.find((trendObj) => { return parseInt(trendObj.id) == parseInt(trendDataObj.id); });
if (currentTrendObj !== undefined) {
currentTrendObj.data.push({ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name });
} else {
dataArray.pushObject({ id: trendDataObj.id, name: trendDataObj.name, lineWidth: 3,
data: [{ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name }], marker: { fillColor: '#FF9D9D' }});
}
});
});
if (Object.keys(this.get('model.reportData.category_thresholds')).length !== 0) {
let upperThresholdLineData = { name: 'Upper Threshold', data: [], showInLegend: false };
let lowerThresholdLineData = { name: 'Lower Threshold', data: [], showInLegend: false };
upperThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.upper_threshold]);
upperThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.upper_threshold]);
lowerThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold]);
lowerThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold]);
dataArray.pushObject(upperThresholdLineData);
dataArray.pushObject(lowerThresholdLineData);
let thresholdRange = { name: 'Threshold Range',
type: 'arearange',
color: '#C7F3D4',
zIndex: -999,
data: [[addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold],
[addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold]],
showInLegend: false };
dataArray.pushObject(thresholdRange);
}
}
然后我只是用highcharts助手来渲染它:
{{high-charts chartOptions=chartOptions content=chartData}}
答案 0 :(得分:0)
如果有人感兴趣:
正是我创建的这个自定义函数:addMonths(startMonth, monthIndex)
导致了所有问题。我完全没有来自IE的输出,我知道这是发生了,它花了很多肘油脂才能弄清楚。相反,我只是安装了moment.js,并使用此函数来增加月份,并以毫秒为单位显示highcharts将遵守的值:
moment(startMonth, "YYYY-MM-DD").add(monthIndex, 'months').valueOf()
请注意,需要指定带有日期格式的额外参数,或者再次使用该参数,在除IE之外的所有浏览器中都可以使用。