我正在从Highcharts 3.0.7升级到4.2.5。几个图表在3.0.7中工作正常,并在回流时抛出此错误。似乎reflow事件提供了错误的上下文。窗口的上下文,因此图表未定义。有没有办法解决这个问题?
以下是我的环境中的图表代码:
var ChartSize = {
SMALL: {
marginTop: 44,
marginLeft: 26,
marginRight: 26,
height: 226,
width: 290,
yAxis: {
height: 116
},
xAxis: {
plotLines: {
x: -30,
y: -26
},
offset: 32,
labels: {
y: 20,
fontSize: '11px'
},
y: 15
}
},
LARGE: {
marginTop: 75,
marginLeft: 28,
marginRight: 28,
height: 375,
yAxis: {
height: 216
},
xAxis: {
plotLines: {
x: -83,
y: -60
},
offset: 40,
labels: {
y: 25,
fontSize: '12px'
},
y: 20
}
}
}
...
{
chart: {
backgroundColor: 'transparent',
type: 'area',
marginTop: ChartSize[args.size].marginTop,
marginLeft: ChartSize[args.size].marginLeft,
marginRight: ChartSize[args.size].marginRight,
height: ChartSize[args.size].height,
width: ChartSize[args.size].width,
reflow: true,
events: {
load: function() {
that.onChartLoaded(this);
},
redraw: function() {
that.onChartLoaded(this);
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
},
symbol: 'circle'
},
lineWidth: 0
},
series: {
fillOpacity: 1
}
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return that.getTitle(this.y) + "<br/>" + TimeUtil.formatTime(that.getSecondsOffset(this.x), that.timeFormat24Hour);
},
shared: true,
useHTML: true
},
xAxis: [{
type: 'datetime',
tickInterval: 3600 * 1000,
title: {
text: null
},
startOnTick: false,
maxPadding: 0,
min: min,
max: max,
labels: {
y: ChartSize[args.size].xAxis.labels.y,
autoRotation: false,
staggerLines: 1,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if (this.isFirst) {
return '<span class="first-time-label" ' + that.firstLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(min), that.timeFormat24Hour) + '</span>';
} else if (this.isLast) {
var style = that.timeFormat24Hour ? 'style="margin-left: 6px"' : '';
return '<span class="last-time-label" style="margin-left: -5px" ' + that.lastLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(max), that.timeFormat24Hour) + '</span>';
}
return '<a href="javascript:void(0)" style="color:#898989; font-size: 12px" title="'
+ TimeUtil.formatTime(that.getSecondsOffset(this.value), that.timeFormat24Hour) + '">●</a>';
},
useHTML: true
},
tickWidth: 0,
plotLines: [{
color: '#282828',
dashStyle: 'ShortDash',
value: sleepTime.getTime(),
width: 2,
label: {
text: '<div class="sleep-time-placeholder bed-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5,
padding: 0.5
},
{
color: '#282828',
dashStyle: 'ShortDash',
value: wakeTime.getTime(),
width: 2,
label: {
text: '<div class="awake-time-placeholder wake-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5
}]
},
{
type: 'datetime',
title: {
text: null
},
lineColor: '#C5C5C5',
linkedTo: 0,
offset: ChartSize[args.size].xAxis.offset,
startOnTick: true,
min: min,
labels: {
autoRotation: false,
align: 'left',
staggerLines: 1,
useHTML: true,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if(this.isLast) {
return '';
}
var date = DateParser.parseEpoch(this.value);
var dateStr = DateFormatter.formatMonthDay(date);
return '<span class="timeline_label">' + dateStr.toUpperCase() + '</span>';
},
y: ChartSize[args.size].xAxis.y
},
tickWidth: 1,
tickPosition: 'inside',
tickPositions: [ min, midnightTime.getTime(), max ]
}],
yAxis: [ {
gridLineColor: '#E6E6E6',
labels: {
enabled: false
},
title: {
text: ''
},
lineWidth: 0,
max: 3,
tickInterval: 1
} ],
legend: {
enabled: false
}
}
}