Highcharts Uncaught TypeError:无法读取未定义的属性“图表”

时间:2016-07-25 15:40:18

标签: javascript backbone.js highcharts

我正在从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) + '">&#9679;</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
            }
        }
    }

0 个答案:

没有答案